使用bootstrap实现多选下拉框，获取值及绑定值

最新推荐文章于 2024-10-30 06:30:00 发布

落叶@Henry

最新推荐文章于 2024-10-30 06:30:00 发布

阅读量2.5k

点赞数 1

本文链接：https://blog.csdn.net/yu240956419/article/details/124358421

版权

源码我在文末提供
实现的效果图如下
在这里插入图片描述

代码：

<!DOCTYPE html>
<html  >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap/bootstrap-select/dist/css/bootstrap-select.min.css">  
    <script src="./assets/js/vendor/vendor.min.js"></script>
   <script src="./bootstrap/js/bootstrap.min.js"></script> 
    <script src="./bootstrap/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
    <style>
    </style>
</head>
<body>
    <table>


        <tr>
            <td>   
                
                
                <input list="browsers" name="browser">
                <datalist id="browsers" multiple>
                  <option value="Internet Explorer">
                  <option value="Firefox">
                  <option value="Chrome">
                  <option value="Opera">
                  <option value="Safari">
                </datalist>
            
            </td>
            <td>  
                
                <select    id="sel"   class="selectpicker" style="width:150px;" multiple="multiple">
                <option value="1"  selected> 西瓜 </option>
                <option value="2"  selected > 香蕉</option>
                <option value="3" > 橙子</option>
                <option value="4"> 牛奶</option>
                <option value="5" > 猕猴桃</option>
                <option value="6" > 梨</option>
                <option value="7" > 苹果</option>
            </select>
           </td>
        </tr>
    </table>
    


        
  
    <button id="btnadd" type="button"> 按钮</button>
    <script>
        $("#btnadd").click(function(){  

            alert( $("#sel").val());

          });
          $(function(){

            
            let options=   $("#sel>option") ;
        
             let sels= "6,7,8".split(',');


          var list_val = ['1','2','3','5']
        $('#sel').selectpicker('val',list_val);
        $('#sel').selectpicker('refresh');  //刷新，必须有
        //   $("#sel~button")
        //   for (const item of options) {
            

          
        //        if( sels.findIndex (s=>s==item.value)>=0){
                      
        //         item.selected=true;

        //        } 
        //   }

          });
    </script>
  
</body>
</html>