背景

Bootstrap-select 是一款基于JQuery的 下拉菜單 插件，支持搜索和多項(xiàng)選擇功能，支持Booststrap。

點(diǎn)擊這里進(jìn)入Bootstrap-select中文官方網(wǎng)站

使用效果如下圖所示：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

---

?常用屬性

初始化：

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

?

搜索功能，增加如下屬性：

data-live-search =“true”

?

使用 data-max-options 限制選擇的數(shù)量，使用?maxOptionsText?自定義達(dá)到限制時顯示的消息：

<select class="selectpicker" multiple data-max-options="2" maxOptionsText="只能選擇2個"><option>Mustard</option><option>Ketchup</option><option>Relish</option> </select>

?

使用title屬性將在未選擇任何內(nèi)容時設(shè)置默認(rèn)占位符文本?：

<select class="selectpicker" multiple title="Choose one of the following..."><option>Mustard</option><option>Ketchup</option><option>Relish</option> </select>

?

在菜單頂部添加兩個按鈕 - 選擇全部 、取消全部 ：data-actions-box =“true”。?

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

?

?指定列表中顯示數(shù)據(jù)的數(shù)量：data-size = "5"

<select class="selectpicker" data-size="5">... </select>

?

?在下拉菜單中添加標(biāo)題，?data-header="Select a condiment"

<select class="selectpicker" data-header="Select a condiment">... </select>

?

自定義寬度：

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

---

?常用方法

指定所選值：

$('.selectpicker').selectpicker('val', 'Mustard'); $('.selectpicker').selectpicker('val', ['Mustard','Relish']);

指定所選的文本內(nèi)容：

$("#Id option:selected").text();

?

第二種指定所選值的方法：

$('.selectpicker').val('Mustard'); $('.selectpicker').selectpicker('render');

?利用JS動態(tài)刪除操作，需要操作后刷新：

$('.rm-mustard').click(function () {$('.remove-example').find('[value=Mustard]').remove();$('.remove-example').selectpicker('refresh'); });

強(qiáng)制重繪：

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

?

?

?

總結(jié)

以上是生活随笔為你收集整理的Bootstrap-select使用说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。