引入檔案

<link href="/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>

html初始化

Select單選：

如果沒有設定選中項，預設選中第一個option。如設定了tiltle屬性，則顯示title屬性內容，不會預設選中。

<select class="selectpicker" title="大魔王">....</select>

效果：

新增樣式：data-style="class名"

<select class="selectpicker" data-style="btn-info">...</select>

效果：

新增檢索：data-live-search="true"

<select class="selectpicker" data-live-search="true">....</select>

效果：

Select多選：

新增“multiple ” 設定為多選，並且設定最多能選擇2項 data-max-options="2"

<select class="selectpicker form-control" multiple data-max-options="2">...</select>

效果：

新增檢索：data-live-search="true"

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

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

<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="搜尋" data-actions-box="true"> 　　<optgroup label="filter1"> 　　　　<option>option1</option> 　　　　<option selected>option2</option> 　　　　<option>option3</option> 　　　　<option>option4</option> 　　</optgroup> 　　<optgroup label="filter2"> 　　　　<option>option1</option> 　　　　<option>option2</option> 　　　　<option>option3</option> 　　　　<option>option4</option> 　　</optgroup> 　　<optgroup label="filter3"> 　　　　<option>option1</option> 　　　　<option>option2</option> 　　　　<option>option3</option> 　　　　<option>option4</option> 　　</optgroup> </select>

效果：

js初始化,設定選定的值

$('.selectpicker').selectpicker('val','mustard');

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

更新UI

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

選中事件

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

});

更多用法，請查閱 http://silviomoreto.github.io/bootstrap-select/