web实现下拉列表多选加搜索

最新推荐文章于 2023-09-13 16:41:23 发布

xiaozhen0610

最新推荐文章于 2023-09-13 16:41:23 发布

阅读量1k

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2h2aac0kbib.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

实现如图所示的下拉多选还能带有搜索功能。

<!DOCTYPE html>
<html>
  <head>
  <title></title>
  <script src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="js/bootstrap-select.js">
</script>

<!--引进bootstrap-select.css的文件-->

　　<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">

  <!-- 3.0 -->

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bootstrap.min.js"></script>

  <!-- 2.3.2
    <link href="css/bootstrap-combined.min.css" rel="stylesheet">
   

 <script src="js/bootstrap.js"></script>
    -->

  <script type="text/javascript">
    
   
 $(window).on('load', function () {
    $('.selectpicker').selectpicker({'selectedText': 'cat'});
    $('.selectpicker').selectpicker('val', 'Mustard');  
   // var options=$("#id_select option:selected");
   // console.log(options.val());
 }); // $(function(){  
   //      $.post('/bin/mydata',function(res){  
   //          var txt='';  
   //          for(var i = 0;i <res.length;i++){  
   //              txt += '<option>' + res[i].name +'</option>';  
   //          }  
   //          console.log(txt);//  
   //          document.getElementById('id_select').innerHTML=txt;  
   //          $('.selectpicker').selectpicker('refresh');  
   //      });  
   //  }); 
  </script>
  </head>
  <body>
<label for="id_select"></label>
<select id="id_select" class="selectpicker bla bla bli" multiple data-live-search="true">
    <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
     <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option> <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
     <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option> <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option> <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
     <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option> <option>cow(123)</option>
    <option>bull</option>
    <option>ASD</option>
    <option selected>Bla</option>
    <option>Ble</option>
  </select>
</body>
</html>