1. 程式人生 > >【bootstrap】多選可搜尋下拉框

【bootstrap】多選可搜尋下拉框

1.引入必要檔案

 <script type="text/javascript" src="http://www.daimajiayuan.com/download/jquery/jquery-1.10.2.min.js"></script>  
        <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.js"></script>    
        <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.css">    
        <!-- 3.0 -->  
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">  
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  

2.script

  <script type="text/javascript">  
            $(window).on('load', function () {  
      
                $('.selectpicker').selectpicker({  
                    'selectedText': 'cat'  
                });  
                // $('.selectpicker').selectpicker('hide');  
            });  
        </script>  

3.body

 <label for="id_select">多選搜尋下拉框</label>  
        <select id="11" class="selectpicker bla bla bli" multiple data-live-search="true">  
            <option>text1</option>  
            <option>text2</option>  
            <option>text3</option>

</select>