bootstrap-select 的多選+模糊查詢下拉框詳解（官方示例文檔解讀）

引入問題

之前博主在實際開發中遇到了一個問題，就是需要既支持多選又同時支持模糊查詢的下拉控件，大家所熟知的比較強大的下拉框插件bootstrap-select2，博主當時也參考過，但是發現它的多選效果做的比較差，類似這種，

 

select2下拉多選框

這樣的多選控件必須要控件足夠長，如果選擇超過一定限制就會出現樣式崩潰，你懂的~后面我無意中發現了bootstrap-select插件，瞬間發現它很高大上呀！它即可以支持單選，又支持多選，最厲害的是竟然還自帶模糊查詢功能！先給大家展示下炫酷的效果吧：

 

bootstrap-select下拉多選框

這樣的控件不用真是可惜了，后面博主找了很多文檔和博客參考，但是發現很多都沒有寫清楚具體的用法，只是簡單的擺一個例子，並沒有太大的參考價值，博主通過研究官網的相關文檔以及結合自身開發經驗，把bootstrap-select的用法做一個清晰的梳理，供大家參考。
官方插件地址: http://silviomoreto.github.io/bootstrap-select/
Github地址: https://github.com/silviomoreto/bootstrap-select

應用示例（參考官方文檔Basic examples）

1.單選

• 簡單單選
  選中默認是沒有“√”的。

<select class="selectpicker"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

簡單單選

• 分組單選
  注意加入optgroup標簽

   <select class="selectpicker"> <optgroup label="Picnic"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </optgroup> <optgroup label="Camping"> <option>Tent</option> <option>Flashlight</option> <option>Toilet Paper</option> </optgroup> </select> 

效果展示

 

分組單選

2.多選框

相比於單選框加入了一個multiple標簽

<select class="selectpicker" multiple> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

多選框

3.模糊查詢

添加一個data-live-search="true"的屬性

<select class="selectpicker" data-live-search="true"> <option>Hot Dog</option> <option>Fries</option> <option>Soda</option> <option>Burger</option> <option>Shake</option> <option>Smile</option> </select> 

效果展示

 

模糊查詢

4.多選限制

添加屬性data-max-options="2"或者在初始化時用maxOptionsText做限制

<select class="selectpicker" multiple data-max-options="2"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

或者在初始化selectpicker時設置maxOptionsText

$('.selectpicker').selectpicker({ 'selectedText':'cat', 'maxOptionsText':2; }) 

效果展示

 

多選限制

5.自定義按鈕的文本

通過屬性title來控制。

• 選擇框文本

<select class="selectpicker" multiple title="請選擇一個"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

選擇框文本

• 選擇顯示單條文本
  意思就是選中相應的option，就展示option的title，比如選中"Burger, Shake and a Smile",文本框內顯示Combo 2。

<select class="selectpicker"> <option title="Combo 1">Hot Dog, Fries and a Soda</option> <option title="Combo 2">Burger, Shake and a Smile</option> <option title="Combo 3">Sugar, Spice and all things nice</option> </select> 

效果展示

 

單條文本

6.多選框格式化選擇文本

通過屬性 data-selected-text-format 來控制選中的值的顯示
可選的值有如下4個：
1.values： 逗號分隔的選定值列表（系統默認）；
2.count： 如果選擇了一個項，則顯示選項值。如果選擇多於一個，則顯示所選項的數量,如選擇2個，則下拉框顯示2個已被選中；
3.count > x： 當count的值小於x時，展示逗號分隔的選定值列表;當count>x時，顯示x個被選中；
4.static：無論選中什么，都只展示默認的選中文本。
下面給幾個簡單示例

<select class="selectpicker" multiple data-selected-text-format="count"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> 

效果展示

 

count格式化

<select class="selectpicker" multiple data-selected-text-format="count>3"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> <option>Onions</option> </select> 

效果展示

 

count>x格式化

7.樣式選擇

• 按鈕樣式
  通過data-style來設置按鈕的樣式

<select class="selectpicker" data-style="btn-primary"> ... </select> <select class="selectpicker" data-style="btn-info"> ... </select> <select class="selectpicker" data-style="btn-success"> ... </select> <select class="selectpicker" data-style="btn-warning"> ... </select> <select class="selectpicker" data-style="btn-danger"> ... </select> 

效果展示

 

按鈕樣式

• 單選框樣式
  這里要注意一下，單選框默認是沒有多選框的選中之后的"√"圖標的，如果想要加上這個圖標的話，需要在樣式中加入show-tick即可。

<select class="selectpicker show-tick"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

單選框選中樣式

• 菜單的箭頭
  Bootstrap的菜單箭頭也可以被添加進來，需要加入樣式show-menu-arrow，個人感覺差別不大

<select class="selectpicker show-menu-arrow"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

菜單的箭頭

• style樣式自定義
  bootstrap-select的樣式不是死的，可以自定義style樣式，類似最基本的css樣式添加。

.special { font-weight: bold !important; color: #fff !important; background: #bc0000 !important; text-transform: uppercase; } <select class="selectpicker"> <option>Mustard</option> <option class="special">Ketchup</option> <option style="background: #5cb85c; color: #fff;">Relish</option> </select> 

效果展示

 

style樣式

• 寬度（Width）
  1.引用bootstrap的樣式

<div class="row"> <div class="col-xs-3"> <div class="form-group"> <select class="selectpicker form-control"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> </div> </div> 

2.使用data-width屬性，來定義寬度，可選的值有以下4個
auto：select的寬度由option中內容寬度最寬的哪個決定；
fit：select的寬度由實際選中的option的寬度決定；
100px：select的寬度定義為100px；
50%：select的寬度設置為父容器寬度的50%。

<select class="selectpicker" data-width="auto"> <option>cow</option> <option>bullaaaaaaaaaaaa</option> <option>ASD</option> <option>Bla</option> <option>Ble</option> </select> <select class="selectpicker" data-width="fit"> <option>cow</option> <option>bullaaaaaaaaaaaa</option> <option>ASD</option> <option>Bla</option> <option>Ble</option> </select> <select class="selectpicker" data-width="100px"> <option>cow</option> <option>bull</option> <option>ASD</option> <option selected>Bla</option> <option>Ble</option> </select> <select class="selectpicker" data-width="50%"> <option>cow</option> <option>bull</option> <option>ASD</option> <option selected>Bla</option> <option>Ble</option> </select> 

效果展示：從左至右依次為“auto”,“fit","100px","50%"。

 

不同風格的width

8.自定義option

1.添加圖標
用data-icon給option添加小圖標，實現比較炫酷的效果

 <select class="selectpicker"> <option data-icon="glyphicon-heart">Ketchup</option> <option data-icon="glyphicon glyphicon-th-large">Mustard</option> <option data-icon="glyphicon glyphicon-home">Relish</option> </select> 

效果展示

 

添加icon

如果想要獲取更多樣式可參考bootstrap官網的圖標庫，給個網址
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

2.插入HTML
用data-content可以在option中插入html元素,實現想要的效果。

<select class="selectpicker"> <option data-content="<span class='label label-success'>Relish</span>">Relish</option> </select> 

效果展示

 

插入html

3.插入二級標題
用data-subtext實現二級標題，實現提示或者其他效果，如果要在select中也展示二級標題,要在初始化selectpicker時要設置showSubtext為true。

<select class="selectpicker" data-size="5"> <option data-subtext="Heinz">Ketchup</option> <option data-subtext="ble">Mustard</option> <option data-subtext="com">Relish</option> </select> 

效果展示

 

插入二級標題

$('.selectpicker').selectpicker({ 'selectedText':'cat', 'showSubtext':true }) <select class="selectpicker" data-size="5"> <option data-subtext="Heinz">Ketchup</option> <option data-subtext="ble">Mustard</option> <option data-subtext="com">Relish</option> </select> 

效果展示

 

插入二級標題（二）

9.自定義下拉菜單

1.菜單顯示項大小
通過data-size屬性來限制菜單顯示的條數，比如說option有8條，我們只展示5條,其余的通過滾動條顯示。

<select class="selectpicker" data-size="5"> <option>apple</option> <option>banana</option> <option>group</option> <option>orange</option> <option>cherry</option> <option>mango</option> <option>pineapple</option> <option>lychee</option> </select> 

效果展示(只展示前5個，后面的可以拖動滾動條查看)

 

限定菜單顯示項

2.全選和全不選
通過設置data-actions-box="true"來添加全選和全不選的按鈕

<select class="selectpicker" multiple data-actions-box="true"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

全選和全不選

當然這個按鈕的文本也是可以自定制的
只需要在初始化時設置即可

       $('.selectpicker').selectpicker({ 'selectedText':'cat', 'noneSelectedText':'請選擇', 'deselectAllText':'全不選', 'selectAllText': '全選', }) 

效果展示

 

全選和全不選

3.添加數據分割線
設置data-divider="true"添加數據分割線。

<select class="selectpicker" data-size="5"> <option>Mustrad</option> <option >Ketchup</option> <option >Relish</option> <option data-divider="true"></option> <option>Mustrad</option> <option >Ketchup</option> <option >Relish</option> </select> 

效果展示

 

數據分割線

4.添加菜單頭
用data-header為下拉菜單設置菜單頭

<select class="selectpicker" data-header="Select a condiment"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

添加菜單頭

5.設置菜單的上浮或者下浮
通過設置 dropupAuto來設置菜單的上下浮動， dropupAuto默認為true，自動確定是否應顯示的菜單上面或下面的選擇框，如果設置為false，系統會加入一個 dropup樣式的上拉框。

 

 $('.selectpicker').selectpicker({ 'selectedText':'cat', 'dropupAuto':false }) <select class="selectpicker dropup"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

設置菜單上浮

10.不可用

在對應的控件上加入disabled即可實現
1.設置select不可用
這里select按鈕失效，不能點擊

<select class="selectpicker" disabled> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

設置select不可用

2.設置option不可用
這里option設置屬性為disabled的將無法選中

<select class="selectpicker"> <option>Mustard</option> <option disabled>Ketchup</option> <option>Relish</option> </select> 

效果展示

 

設置option不可用

3.設置optiongroup不可用
這里是一個optiongroup將無法選中

<select class="selectpicker test"> <optgroup label="Picnic" disabled> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </optgroup> <optgroup label="Camping"> <option>Tent</option> <option>Flashlight</option> <option>Toilet Paper</option> </optgroup> </select> 

效果展示

 

設置optiongroup不可用

總結

好的，這里我們基本上把官方的應用示例解讀完畢，當然如果有疑問可以自己親自去驗證或者咨詢博主，想實現自己想要的效果就要多加摸索和實踐，只要明白其中的規則就能觸類旁通了。第一篇關於bootstrap-select的官方示例文檔的解讀，如果想了解更多bootstrap-select的用法，可以看我后面的博客哦

作者：AireyZXL
鏈接：https://www.jianshu.com/p/4759623498af
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。