背景

Bootstrap-select 是一款基于JQuery的 下拉菜单 插件，支持搜索和多项选择功能，支持Booststrap。

点击这里进入Bootstrap-select中文官方网站

使用效果如下图所示：

                                        

---

 常用属性

初始化：

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

 

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

data-live-search =“true”

 

使用 data-max-options 限制选择的数量，使用 maxOptionsText 自定义达到限制时显示的消息：

<select class="selectpicker" multiple data-max-options="2" maxOptionsText="只能选择2个"><option>Mustard</option><option>Ketchup</option><option>Relish</option>
</select>

 

使用title属性将在未选择任何内容时设置默认占位符文本 ：

<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>

 

 指定列表中显示数据的数量：data-size = "5"

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

 

 在下拉菜单中添加标题， 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']);

指定所选的文本内容：

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

 

第二种指定所选值的方法：

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

 利用JS动态删除操作，需要操作后刷新：

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

强制重绘：

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