900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > bootstrap多选按钮_bootstrap-select 多选下拉框使用教程

bootstrap多选按钮_bootstrap-select 多选下拉框使用教程

时间:2023-05-27 10:20:13

相关推荐

bootstrap多选按钮_bootstrap-select 多选下拉框使用教程

http://silviomoreto.github.io/bootstrap-select/

一、使用bootstrap-select组件时,先引用下列文件

最后一个文件defaults-zh_CN.min.js非必需,是组件中文化的时候才需要引用。

使用就更加简单了,不用任何已经js,直接使用class就可以初始化。

Select单选:

如果没有设置选中项,默认选中第一个option。如设置了tiltle属性,则显示title属性内容,不会默认选中。

广东省

广西省

福建省

湖南省

山东省

选项分组

广州市

深圳市

珠海市

南宁市

柳州

桂林市

烟台

青岛

济南

默认样式,添加样式:data-style="class名"

...

...

...

...

...

添加检索:data-live-search="true"

....

Select多选:

添加“multiple” 设置为多选,并且设置最多能选择2项data-max-options="2"

...

效果:

添加检索:data-live-search="true"

设置检索placeholder属性:data-live-search-placeholder="搜索"

添加“全选/反选”功能按钮data-actions-box="true"

option1

option2

option3

option4

option1

option2

option3

option4

option1

option2

option3

option4

效果:

js初始化,设置选定的值

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

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

更新UI

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

选中事件

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

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。