使用bootstrap中下拉多選框的方法？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站設計、成都網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元城陽做網(wǎng)站,已為上家服務,為城陽各地企業(yè)和個人服務,聯(lián)系電話:18982081108

使用bootstrap-select組件時，先引用下列文件

最后一個文件 defaults-zh_CN.min.js 非必需，是組件中文化的時候才需要引用。

使用就更加簡單了，不用任何已經(jīng)js，直接使用class就可以初始化。

Select單選：

如果沒有設置選中項，默認選中第一個option。如設置了tiltle屬性，則顯示title屬性內(nèi)容，不會默認選中。

    廣東省
    廣西省
    福建省
    湖南省
    山東省   

選項分組

        
                廣州市
                深圳市
                珠海市
            
          
                  南寧市
                  柳州
                  桂林市
             
           
                   煙臺
                   青島
                   濟南
                                       

默認樣式，添加樣式：data-style="class名"

  ...


  ...


  ...


  ...


  ...

添加檢索：data-live-search="true"

....

Select多選：

添加“multiple ” 設置為多選，并且設置最多能選擇2項 data-max-options="2"

...

效果：

添加檢索：data-live-search="true"

設置檢索placeholder屬性：data-live-search-placeholder="搜索"

添加“全選/反選” 功能按鈕 data-actions-box="true"

　　
　　　　option1
　　　　option2
　　　　option3
　　　　option4
　　
　　
　　　　option1
　　　　option2
　　　　option3
　　　　option4
　　
　　
　　　　option1
　　　　option2
　　　　option3
　　　　option4
　　

效果：

js初始化,設置選定的值

$('.selectpicker').selectpicker('val','mustard');
$('.selectpicker').selectpicker('val',['mustard','relish']);

更新UI

$('.selectpicker').selectpicker('refresh');

選中事件

$('.selectpicker').on('changed.bs.select',function(e){
});

感謝各位的閱讀！看完上述內(nèi)容，你們對使用bootstrap中下拉多選框的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。