深入解析bootstrap-select中的多选和模糊查询下拉框

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

深入解析bootstrap-select中的多选和模糊查询下拉框

本篇文章带大家详细了解一下bootstrap-select中的多选和模糊查询下拉框。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

引入问题

之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种,

这样的多选控件必须要控件足够长,如果选择超过一定限制就会出现样式崩溃,你懂的~后面我无意中发现了bootstrap-select插件,瞬间发现它很高大上呀!它即可以支持单选,又支持多选,最厉害的是竟然还自带模糊查询功能!先给大家展示下炫酷的效果吧:

这样的控件不用真是可惜了,后面博主找了很多文档和博客参考,但是发现很多都没有写清楚具体的用法,只是简单的摆一个例子,并没有太大的参考价值,博主通过研究官网的相关文档以及结合自身开发经验,把bootstrap-select的用法做一个清晰的梳理,供大家参考。【相关推荐:《bootstrap教程》】

官方插件地址: http://silviomoreto.github.io/bootstrap-select

Github地址: https://github.com/silviomoreto/bootstrap-select

应用示例(参考官方文档Basic examples)1.单选简单单选选中默认是没有“√”的。
<select class="selectpicker">  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>
登录后复制

效果展示

分组单选注意加入optgroup标签
   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>
登录后复制

效果展示

2.多选框

相比于单选框加入了一个multiple标签

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>
登录后复制

效果展示

3.模糊查询

添加一个data-live-search="true"的属性

<select class="selectpicker" data-live-search="true">  <option>Hot Dog</option>  <option>Fries</option>  <option>Soda</option>  <option>Burger</option>  <option>Shake</option>  <option>Smile</option></select>
登录后复制

效果展示

4.多选限制

添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制

<select class="selectpicker" multiple data-max-options="2">  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>
登录后复制

或者在初始化selectpicker时设置maxOptionsText

$('.selectpicker').selectpicker({                'selectedText':'cat',                'maxOptionsText':2;             })
登录后复制

效果展示

5.自定义按钮的文本

通过属性title来控制。

选择框文本
<select class="selectpicker" multiple title="请选择一个">  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>
登录后复制

效果展示

选择显示单条文本意思就是选中相应的option,就展示option的title,比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。
<select class="selectpicker">  <option title="Combo 1">Hot Dog, Fries and a Soda</option>  <option title="Combo 2">Burger, Shake and a Smile</option>  <option title="Combo 3">Sugar, Spice and all things nice</option></select>
登录后复制

效果展示

6.多选框格式化选择文本

通过属性 data-selected-text-format 来控制选中的值的显示可选的值有如下4个:

1.values: 逗号分隔的选定值列表(系统默认);

2.count: 如果选择了一个项,则显示选项值。如果选择多于一个,则显示所选项的数量,如选择2个,则下拉框显示2个已被选中;

3.count > x: 当count的值小于x时,展示逗号分隔的选定值列表;当count>x时,显示x个被选中;

4.static:无论选中什么,都只展示默认的选中文本。下面给几个简单示例

<select class="selectpicker" multiple data-selected-text-format="count">  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option>  <option>Onions</option></select>
登录后复制

效果展示

<select class="selectpicker" multiple data-selected-text-format="count>3">  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option>  <option>Onions</option></select>
登录后复制

效果展示

7.样式选择按钮样式通过data-style来设置按钮的样式
   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>0
登录后复制

效果展示

单选框样式这里要注意一下,单选框默认是没有多选框的选中之后的"√"图标的,如果想要加上这个图标的话,需要在样式中加入show-tick即可。
   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>1
登录后复制

效果展示

菜单的箭头Bootstrap的菜单箭头也可以被添加进来,需要加入样式show-menu-arrow,个人感觉差别不大
   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>2
登录后复制

效果展示

style样式自定义bootstrap-select的样式不是死的,可以自定义style样式,类似最基本的css样式添加。
   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>3
登录后复制

效果展示

宽度(Width)

1.引用bootstrap的样式

   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>4
登录后复制

2.使用data-width属性,来定义宽度,可选的值有以下4个auto:select的宽度由option中内容宽度最宽的哪个决定;fit:select的宽度由实际选中的option的宽度决定;100px:select的宽度定义为100px;50%:select的宽度设置为父容器宽度的50%。

   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>5
登录后复制

效果展示:从左至右依次为“auto”,“fit","100px","50%"。

8.自定义option

1.添加图标用data-icon给option添加小图标,实现比较炫酷的效果

   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>6
登录后复制

效果展示

如果想要获取更多样式可参考bootstrap官网的图标库,给个网址www.runoob.com/bootstrap/b…

2.插入HTML用data-content可以在option中插入html元素,实现想要的效果。

   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>7
登录后复制

效果展示

3.插入二级标题用data-subtext实现二级标题,实现提示或者其他效果,如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。

   <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>8
登录后复制

效果展示

$('.selectpicker').selectpicker({                'selectedText':'cat',                'showSubtext':true             })                <select class="selectpicker">     <optgroup label="Picnic">    <option>Mustard</option>    <option>Ketchup</option>    <option>Relish</option>     </optgroup>    <optgroup label="Camping">    <option>Tent</option>    <option>Flashlight</option>    <option>Toilet Paper</option>    </optgroup>   </select>8
登录后复制

效果展示

9.自定义下拉菜单

1.菜单显示项大小通过data-size属性来限制菜单显示的条数,比如说option有8条,我们只展示5条,其余的通过滚动条显示。

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>0
登录后复制

效果展示(只展示前5个,后面的可以拖动滚动条查看)

2.全选和全不选通过设置data-actions-box="true"来添加全选和全不选的按钮

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>1
登录后复制

效果展示

当然这个按钮的文本也是可以自定制的只需要在初始化时设置即可

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>2
登录后复制

效果展示

3.添加数据分割线设置data-divider="true"添加数据分割线。

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>3
登录后复制

效果展示

4.添加菜单头用data-header为下拉菜单设置菜单头

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>4
登录后复制

效果展示

5.设置菜单的上浮或者下浮通过设置dropupAuto来设置菜单的上下浮动,dropupAuto默认为true,自动确定是否应显示的菜单上面或下面的选择框,如果设置为false,系统会加入一个dropup样式的上拉框。

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>5
登录后复制

效果展示

10.不可用

在对应的控件上加入disabled即可实现1.设置select不可用这里select按钮失效,不能点击

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>6
登录后复制

效果展示

2.设置option不可用这里option设置属性为disabled的将无法选中

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>7
登录后复制

效果展示

3.设置optiongroup不可用这里是一个optiongroup将无法选中

<select class="selectpicker" multiple>  <option>Mustard</option>  <option>Ketchup</option>  <option>Relish</option></select>8
登录后复制

效果展示

总结

好的,这里我们基本上把官方的应用示例解读完毕,当然如果有疑问可以自己亲自去验证或者咨询博主,想实现自己想要的效果就要多加摸索和实践,只要明白其中的规则就能触类旁通了。第一篇关于bootstrap-select的官方示例文档的解读,如果想了解更多bootstrap-select的用法,可以关注我后面的博客哦。

更多编程相关知识,请访问:编程入门!!

以上就是深入解析bootstrap-select中的多选和模糊查询下拉框的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:微信开发入门(三)生命周期
下一篇:bootstrap怎么实现圆角

发表评论

关闭广告
关闭广告