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

源码我在文末提供
实现的效果图如下
使用bootstrap实现多选下拉框,获取值及绑定值_第1张图片
使用bootstrap实现多选下拉框,获取值及绑定值_第2张图片
使用bootstrap实现多选下拉框,获取值及绑定值_第3张图片

代码:

<!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>

打包资源地址下载 https://download.csdn.net/download/yu240956419/85204609 免积分哦

你可能感兴趣的:(html5,javascript,css,前端)