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

Bootstrap · 發表 2018-09-19 14:28:22

摘要：之前博主在實際開發中遇到了一個問題，就是需要既支援多選又同時支援模糊查詢的下拉控制元件，大家所熟知的比較強大的下拉框外掛bootstrap-select2，博主當時也參考過，但是發現它的多選效果做的比較差，類似這種，這樣的多選控制元件必須要控制元件足夠長，如果選擇超過...

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

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

這樣的控制元件不用真是可惜了，後面博主找了很多文件和部落格參考，但是發現很多都沒有寫清楚具體的用法，只是簡單的擺一個例子，並沒有太大的參考價值，博主通過研究官網的相關文件以及結合自身開發經驗，把bootstrap-select的用法做一個清晰的梳理，供大家參考。

官方外掛地址: ofollow,noindex">silviomoreto.github.io/bootstrap-s…

Github地址: github.com/silviomoret…

應用示例（參考官方文件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>
複製程式碼

效果展示

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

效果展示

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>
複製程式碼

效果展示

寬度（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%"。

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>
複製程式碼

效果展示

如果想要獲取更多樣式可參考bootstrap官網的圖示庫，給個網址 www.runoob.com/bootstrap/b…

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

<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
複製程式碼

效果展示

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>
複製程式碼

效果展示

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

<select class="selectpicker">
<option>Mustard</option>
<option disabled>Ketchup</option>
<option>Relish</option>
</select>
複製程式碼

效果展示

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>
複製程式碼

效果展示

總結

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

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

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

1.單選

2.多選框

3.模糊查詢

4.多選限制

5.自定義按鈕的文字

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

7.樣式選擇

8.自定義option

9.自定義下拉選單

10.不可用

總結

您可能也會喜歡…