背景

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');

Bootstrap-select使用说明相关推荐

bootstrap select 插件两级联动
2019独角兽企业重金招聘Python工程师标准>>> bootstrap select 插件两级联动插件地址:http://silviomoreto.github.io/boot ...
bootstrap select下拉框模糊搜索和动态绑定数据解决方法
bootstrap select下拉框模糊搜索和动态绑定数据解决方法参考文章: (1)bootstrap select下拉框模糊搜索和动态绑定数据解决方法 (2)https://www.cnblog ...
bootstrap select多选的change事件
bootstrap select的插件多选会自己生成新的DOM,所以绑定在原来select上的change事件不会触发. //bootstrap select插件多选的change事件 $('#fc_ ...
Bootstrap select 多选并获取选中的值
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票效果图: 输出日志代码: <!DOCTYPE html> <html><h ...
bootstrap select 用法
我们要做的功能是点击下拉显示搜索框和数据,搜索框内输入关键字可以匹配数据内容,并可以多选实现效果如下首先引入jquery和bootstrap <link rel="stylesh ...
bootstrap select二级联动
js版本 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...
bootstrap select多选
1.页面效果 <div class="form-group"><div class="col-md-2 control-label">& ...
关于bootstrap select使用碰到的问题
下拉框被遮挡解决:去掉bootstrap.css 中 .input-group .form-control z-index 属性
bootstrap select API
一.Core options 选项可以通过数据属性或JavaScript传递. 对于数据属性,将选项名称附加到data-,如data-style =""或data-selected ...
Bootstrap完美select标签下拉菜单实现
Bootstrap <select>下拉菜单实现初级者使用bootstrap框架时,大部分对官方提供的下拉菜单dropdown组件不是很感冒! 所以,这里就提供简单原生下拉标签<s ...

Bootstrap-select使用说明

背景

常用属性

常用方法

Bootstrap-select使用说明相关推荐

最新文章

热门文章