下面給大家介紹一款集下拉搜索多選框，下拉單選框與一體的bootstrap組件Bootstrap-select，bootstrap-select.js是一款Bootstrap下拉框功能增強插件。它爲bootstrap下拉框增加了分組功能，多選功能，搜索功能，自定義內容和圖標等多種功能，非常強大。實現效果如下。
![]()
一、使用方法
在頁面中引入jquery和bootstrap相關文件，以及bootstrap-select.js和bootstrap-select.css文件。
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.css">
<link href="css/jquery.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-select.css" rel="stylesheet">
二、具體用法
帶分組的下拉選擇框（Select boxes with optgroups）
|
<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>
|
多選下拉框（Multiple select boxes）
|
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
帶搜索功能的下拉框（Live search）
|
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
關鍵詞（Key words）
|
<select class="selectpicker" data-live-search="true">
<option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
<option data-tokens="mustard">Burger, Shake and a Smile</option>
<option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
|
限制選擇的數量（Limit the number of selections）
|
<select class="selectpicker" multiple data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<select class="selectpicker" multiple>
<optgroup label="Condiments" data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Breads" data-max-options="2">
<option>Plain</option>
<option>Steamed</option>
<option>Toasted</option>
</optgroup>
</select>
|
自定義佔位文本（Placeholder）
|
<select class="selectpicker" multiple title="請選擇內容。。">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
替換文本（Selected text）
|
<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>
|
多選下拉框的顯示格式（Selected text format）
通過data-selected-text-format屬性，可以指定在多選下拉框選擇選項後的顯示格式。支持的屬性有：
values：用逗號分隔選擇項。（默認）count：當選項等於一個時，顯示選擇選項的數量。count > x：當選項大於某個數值時，從顯示逗號分隔的多個值改爲顯示選擇的數量。static：總是顯示選擇的替換文本。
|
<select class="selectpicker" multiple data-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</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>
|
按鈕樣式（Button classes）
通過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>
|
勾選圖標（Checkmark on selected option）
在已經選擇的選項上添加勾選圖標。
|
<select class="selectpicker show-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
下拉框箭頭（Menu arrow）
爲下拉框添加一個箭頭。
|
<select class="selectpicker show-menu-arrow">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
自定義分割線樣式（Style individual options）
可以自定義分割線樣式。
|
.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）
可以自定義下拉框的寬度。
|
<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>
|
還可以通過data-width屬性來設置下拉框的寬度。
|
<select class="selectpicker" data-width="auto">
...
</select>
<select class="selectpicker" data-width="fit">
...
</select>
<select class="selectpicker" data-width="100px">
...
</select>
<select class="selectpicker" data-width="75%">
...
</select>
|
圖標（Icons）
可以通過data-icon屬性來爲選項設置一個圖標。
|
<select class="selectpicker">
<option data-icon="glyphicon-heart">Mustard</option>
<option data-icon="glyphicon-star">Ketchup</option>
<option data-icon="glyphicon-paperclip">Relish</option>
</select>
|
自定義內容（Custom content）
可以通過data-content屬性來爲選項插入HTML內容。
|
<select class="selectpicker">
<option data-content="<span class='label label-success'>Mustard</span>">Mustard</option>
<option data-content="<span class='label label-info'>Ketchup</span>">Ketchup</option>
<option data-content="<span class='label label-primary'>Relish</span>">Relish</option>
</select>
|
子文本（Subtext）
可以通過data-size屬性來爲選項添加一個子描述文本。
|
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Mustard</option>
<option data-subtext="ok">Ketchup</option>
<option data-subtext="hello">Relish</option>
</select>
|
菜單顯示多少項（Menu size）
菜單的尺寸默認爲auto。如果設置菜單尺寸爲false或0，則顯示所有的菜單項。你可以通過data-size屬性來設置指定的菜單尺寸。下面的菜單隻顯示2項。
|
<select class="selectpicker" data-size="2">
<option data-subtext="Heinz">Mustard</option>
<option data-subtext="ok">Ketchup</option>
<option data-subtext="hello">Relish</option>
</select>
|
全選或全不選（Select/deselect all options）
通過data-actions-box="true"來對下拉框進行全選或全不選。
|
<select class="selectpicker" multiple data-actions-box="true">
<option data-subtext="Heinz">Mustard</option>
<option data-subtext="ok">Ketchup</option>
<option data-subtext="hello">Relish</option>
</select>
|
分隔線（Divider）
通過data-divider="true"來設置下拉框的分隔線。
|
<select class="selectpicker">
<option>Mustard</option>
<option data-divider="true"></option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
菜單頭部（Menu header）
通過data-header來設置下拉框設置一個菜單頭選項。
|
<select class="selectpicker" data-header="Select a condiment">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
箭頭方向（Dropup menu）
通過.dropupclass來手動設置小箭頭的方向爲向上方向。
|
<select class="selectpicker dropup">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
禁用下拉框（Disabled select box）
通過disabled屬性來禁用下拉框。
|
<select class="selectpicker" disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
|
禁用菜單項（Disabled options）
通過爲菜單項添加.disabled屬性來禁用它。
|
<select class="selectpicker disabled">
<option>Mustard</option>
<option disabled>Ketchup</option>
<option>Relish</option>
</select>
|
禁用下拉框分組（Disabled option groups）
通過爲分組添加.disabled屬性來禁用它。
|
<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>
|
參考文檔：
http://www.htmleaf.com/jQuery/Form/201802134981.html
http://www.htmleaf.com/Demo/201802134982.html
https://github.com/snapappointments/bootstrap-select
