bootstrap-select中多选和模糊查询下拉框的示例分析

tangjin

作者

这篇文章主要介绍了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.单选

简单单选选中默认是没有“√”的。

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

效果展示

分组单选注意加入optgroup标签

<selectclass="selectpicker">
<optgrouplabel="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgrouplabel="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>ToiletPaper</option>
</optgroup>
</select>

效果展示

2.多选框

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

<selectclass="selectpicker"multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

3.模糊查询

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

<selectclass="selectpicker"data-live-search="true">
<option>HotDog</option>
<option>Fries</option>
<option>Soda</option>
<option>Burger</option>
<option>Shake</option>
<option>Smile</option>
</select>

效果展示

4.多选限制

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

<selectclass="selectpicker"multipledata-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

或者在初始化selectpicker时设置maxOptionsText

$('.selectpicker').selectpicker({
'selectedText':'cat',
'maxOptionsText':2;
})

效果展示

5.自定义按钮的文本

通过属性title来控制。

选择框文本

<selectclass="selectpicker"multipletitle="请选择一个">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

选择显示单条文本意思就是选中相应的option，就展示option的title，比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。

<selectclass="selectpicker">
<optiontitle="Combo1">HotDog,FriesandaSoda</option>
<optiontitle="Combo2">Burger,ShakeandaSmile</option>
<optiontitle="Combo3">Sugar,Spiceandallthingsnice</option>
</select>

效果展示

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

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

1.values：逗号分隔的选定值列表（系统默认）；

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

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

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

<selectclass="selectpicker"multipledata-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>

效果展示

<selectclass="selectpicker"multipledata-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>

效果展示

7.样式选择

按钮样式通过data-style来设置按钮的样式

<selectclass="selectpicker"data-style="btn-primary">
...
</select>

<selectclass="selectpicker"data-style="btn-info">
...
</select>

<selectclass="selectpicker"data-style="btn-success">
...
</select>

<selectclass="selectpicker"data-style="btn-warning">
...
</select>

<selectclass="selectpicker"data-style="btn-danger">
...
</select>

效果展示

单选框样式这里要注意一下，单选框默认是没有多选框的选中之后的"√"图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可。

<selectclass="selectpickershow-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

菜单的箭头 Bootstrap的菜单箭头也可以被添加进来，需要加入样式show-menu-arrow，个人感觉差别不大

<selectclass="selectpickershow-menu-arrow">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

style样式自定义 bootstrap-select的样式不是死的，可以自定义style样式，类似最基本的css样式添加。

.special{
font-weight:bold!important;
color:#fff!important;
background:#bc0000!important;
text-transform:uppercase;
}

<selectclass="selectpicker">
<option>Mustard</option>
<optionclass="special">Ketchup</option>
<optionstyle="background:#5cb85c;color:#fff;">Relish</option>
</select>

效果展示

宽度（Width）

1.引用bootstrap的样式

<divclass="row">
<divclass="col-xs-3">
<divclass="form-group">
<selectclass="selectpickerform-control">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>

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

<selectclass="selectpicker"data-width="auto">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<selectclass="selectpicker"data-width="fit">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<selectclass="selectpicker"data-width="100px">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<optionselected>Bla</option>
<option>Ble</option>
</select>
<selectclass="selectpicker"data-width="50%">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<optionselected>Bla</option>
<option>Ble</option>
</select>

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

8.自定义option

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

<selectclass="selectpicker">
<optiondata-icon="glyphicon-heart">Ketchup</option>
<optiondata-icon="glyphiconglyphicon-th-large">Mustard</option>
<optiondata-icon="glyphiconglyphicon-home">Relish</option>
</select>

效果展示

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

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

<selectclass="selectpicker">
<optiondata-content="<spanclass='labellabel-success'>Relish</span>">Relish</option>
</select>

效果展示

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

<selectclass="selectpicker"data-size="5">
<optiondata-subtext="Heinz">Ketchup</option>
<optiondata-subtext="ble">Mustard</option>
<optiondata-subtext="com">Relish</option>
</select>

效果展示

$('.selectpicker').selectpicker({
'selectedText':'cat',
'showSubtext':true
})

<selectclass="selectpicker"data-size="5">
<optiondata-subtext="Heinz">Ketchup</option>
<optiondata-subtext="ble">Mustard</option>
<optiondata-subtext="com">Relish</option>
</select>

效果展示

9.自定义下拉菜单

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

<selectclass="selectpicker"data-size="5">
<option>apple</option>
<option>banana</option>
<option>group</option>
<option>orange</option>
<option>cherry</option>
<option>mango</option>
<option>pineapple</option>
<option>lychee</option>
</select>

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

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

<selectclass="selectpicker"multipledata-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

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

$('.selectpicker').selectpicker({
'selectedText':'cat',
'noneSelectedText':'请选择',
'deselectAllText':'全不选',
'selectAllText':'全选',
})

效果展示

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

<selectclass="selectpicker"data-size="5">
<option>Mustrad</option>
<option>Ketchup</option>
<option>Relish</option>
<optiondata-divider="true"></option>
<option>Mustrad</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

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

<selectclass="selectpicker"data-header="Selectacondiment">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

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

$('.selectpicker').selectpicker({
'selectedText':'cat',
'dropupAuto':false
})

<selectclass="selectpickerdropup">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

10.不可用

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

<selectclass="selectpicker"disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>

效果展示

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

<selectclass="selectpicker">
<option>Mustard</option>
<optiondisabled>Ketchup</option>
<option>Relish</option>
</select>

效果展示

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

<selectclass="selectpickertest">
<optgrouplabel="Picnic"disabled>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgrouplabel="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>ToiletPaper</option>
</optgroup>
</select>

效果展示