bootstrap-select中多选和模糊查询下拉框的示例分析
这篇文章主要介绍了bootstrap-select中多选和模糊查询下拉框的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
目前创新互联建站 已为数千家的企业提供了网站建设、域名、网络空间、网站运营 、企业网站设计、禄丰网站维护 等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
Bootstrap是什么 Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷，它还有一个响应最好的Grid系统，并且能够在手机端通用，而Bootstrap是使用许多可重用的CSS和JavaScript组件，可以帮助实现需要的几乎任何类型的网站的功能，此外，所有这些组件都是响应式的。
引入问题 之前博主在实际开发中遇到了一个问题，就是需要既支持多选又同时支持模糊查询的下拉控件，大家所熟知的比较强大的下拉框插件bootstrap-select2，博主当时也参考过，但是发现它的多选效果做的比较差，类似这种，
这样的多选控件必须要控件足够长，如果选择超过一定限制就会出现样式崩溃，你懂的~后面我无意中发现了bootstrap-select插件，瞬间发现它很高大上呀！它即可以支持单选，又支持多选，最厉害的是竟然还自带模糊查询功能！先给大家展示下炫酷的效果吧：
这样的控件不用真是可惜了，后面博主找了很多文档和博客参考，但是发现很多都没有写清楚具体的用法，只是简单的摆一个例子，并没有太大的参考价值，博主通过研究官网的相关文档以及结合自身开发经验，把bootstrap-select的用法做一个清晰的梳理，供大家参考。
官方插件地址: http://silviomoreto.github.io/bootstrap-select
Github地址: https://github.com/silviomoreto/bootstrap-select
应用示例（参考官方文档Basic examples） 1.单选
Mustard
Ketchup
Relish
效果展示
Mustard
Ketchup
Relish
Tent
Flashlight
Toilet Paper
效果展示
2.多选框 相比于单选框加入了一个multiple标签
Mustard
Ketchup
Relish
效果展示
3.模糊查询 添加一个data-live-search="true"的属性
Hot Dog
Fries
Soda
Burger
Shake
Smile
效果展示
4.多选限制 添加属性data-max-options="2"或者在初始化时用maxOptionsText做限制
Mustard
Ketchup
Relish
或者在初始化selectpicker时设置maxOptionsText
$('.selectpicker').selectpicker({
'selectedText':'cat',
'maxOptionsText':2;
}) 效果展示
5.自定义按钮的文本 通过属性title来控制。
Mustard
Ketchup
Relish
效果展示
Hot Dog, Fries and a Soda
Burger, Shake and a Smile
Sugar, Spice and all things nice
效果展示
6.多选框格式化选择文本 通过属性 data-selected-text-format 来控制选中的值的显示
可选的值有如下4个：
1.values： 逗号分隔的选定值列表（系统默认）；
2.count： 如果选择了一个项，则显示选项值。如果选择多于一个，则显示所选项的数量,如选择2个，则下拉框显示2个已被选中；
3.count > x： 当count的值小于x时，展示逗号分隔的选定值列表;当count>x时，显示x个被选中；
4.static：无论选中什么，都只展示默认的选中文本。
下面给几个简单示例
Mustard
Ketchup
Relish
Onions
效果展示
3">
Mustard
Ketchup
Relish
Onions
效果展示
7.样式选择
...
...
...
...
...
效果展示
Mustard
Ketchup
Relish
效果展示
Mustard
Ketchup
Relish
效果展示
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
Mustard
Ketchup
Relish
效果展示
1.引用bootstrap的样式
Mustard
Ketchup
Relish
2.使用data-width属性，来定义宽度，可选的值有以下4个auto：select的宽度由option中内容宽度最宽的哪个决定；fit：select的宽度由实际选中的option的宽度决定；100px：select的宽度定义为100px；50%：select的宽度设置为父容器宽度的50%。
cow
bullaaaaaaaaaaaa
ASD
Bla
Ble
cow
bullaaaaaaaaaaaa
ASD
Bla
Ble
cow
bull
ASD
Bla
Ble
cow
bull
ASD
Bla
Ble
效果展示：从左至右依次为“auto”,“fit","100px","50%"。
8.自定义option 1.添加图标
用data-icon给option添加小图标，实现比较炫酷的效果
Ketchup
Mustard
Relish
效果展示
如果想要获取更多样式可参考bootstrap官网的图标库，给个网址www.runoob.com/bootstrap/b…
2.插入HTML
用data-content可以在option中插入html元素,实现想要的效果。
Relish">Relish
效果展示
3.插入二级标题
用data-subtext实现二级标题，实现提示或者其他效果，如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。
Ketchup
Mustard
Relish
效果展示
$('.selectpicker').selectpicker({
'selectedText':'cat',
'showSubtext':true
})
Ketchup
Mustard
Relish
效果展示
9.自定义下拉菜单 1.菜单显示项大小
通过data-size属性来限制菜单显示的条数，比如说option有8条，我们只展示5条,其余的通过滚动条显示。
apple
banana
group
orange
cherry
mango
pineapple
lychee
效果展示(只展示前5个，后面的可以拖动滚动条查看)
2.全选和全不选
通过设置data-actions-box="true"来添加全选和全不选的按钮
Mustard
Ketchup
Relish
效果展示
当然这个按钮的文本也是可以自定制的
只需要在初始化时设置即可
$('.selectpicker').selectpicker({
'selectedText':'cat',
'noneSelectedText':'请选择',
'deselectAllText':'全不选',
'selectAllText': '全选',
}) 效果展示
3.添加数据分割线
设置data-divider="true"添加数据分割线。
Mustrad
Ketchup
Relish
Mustrad
Ketchup
Relish
效果展示
4.添加菜单头
用data-header为下拉菜单设置菜单头
Mustard
Ketchup
Relish
效果展示
5.设置菜单的上浮或者下浮
通过设置dropupAuto来设置菜单的上下浮动，dropupAuto默认为true，自动确定是否应显示的菜单上面或下面的选择框，如果设置为false，系统会加入一个dropup样式的上拉框。
$('.selectpicker').selectpicker({
'selectedText':'cat',
'dropupAuto':false
})
Mustard
Ketchup
Relish
效果展示
10.不可用 在对应的控件上加入disabled即可实现
1.设置select不可用
这里select按钮失效，不能点击
Mustard
Ketchup
Relish
效果展示
2.设置option不可用
这里option设置属性为disabled的将无法选中
Mustard
Ketchup
Relish
效果展示
3.设置optiongroup不可用
这里是一个optiongroup将无法选中
Mustard
Ketchup
Relish
Tent
Flashlight
Toilet Paper
效果展示
感谢你能够认真阅读完这篇文章，希望小编分享的“bootstrap-select中多选和模糊查询下拉框的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
新闻名称：bootstrap-select中多选和模糊查询下拉框的示例分析
文章分享：
http://kswjz.com/article/jdceho.html
