bootstrap-select下拉多选框
这样的控件不用真是可惜了，后面博主找了很多文档和博客参考，但是发现很多都没有写清楚具体的用法，只是简单的摆一个例子，并没有太大的参考价值，博主通过研究官网的相关文档以及结合自身开发经验，把bootstrap-select的用法做一个清晰的梳理，供大家参考。
官方插件地址:
http://silviomoreto.github.io/bootstrap-select/
Github地址:
https://github.com/silviomoreto/bootstrap-select
应用示例（参考官方文档Basic examples）
选中默认是没有“√”的。
<select class="selectpicker">
<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;
<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>
可选的值有如下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>
这里要注意一下，单选框默认是没有多选框的选中之后的"√"图标的，如果想要加上这个图标的话，需要在样式中加入show-tick即可。
<select class="selectpicker show-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Bootstrap的菜单箭头也可以被添加进来，需要加入样式show-menu-arrow，个人感觉差别不大
<select class="selectpicker show-menu-arrow">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
2.使用data-width属性，来定义宽度，可选的值有以下4个
auto：select的宽度由option中内容宽度最宽的哪个决定；
fit：select的宽度由实际选中的option的宽度决定；
100px：select的宽度定义为100px；
50%：select的宽度设置为父容器宽度的50%。
<select class="selectpicker" data-width="auto">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
效果展示：从左至右依次为“auto”,“fit","100px","50%"。
用data-icon给option添加小图标，实现比较炫酷的效果
<select class="selectpicker">
<option data-icon="glyphicon-heart">Ketchup</option>
<option data-icon="glyphicon glyphicon-th-large">Mustard</option>
<option data-icon="glyphicon glyphicon-home">Relish</option>
</select>
如果想要获取更多样式可参考bootstrap官网的图标库，给个网址
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
2.插入HTML
用data-content可以在option中插入html元素,实现想要的效果。
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
3.插入二级标题
用data-subtext实现二级标题，实现提示或者其他效果，如果要在select中也展示二级标题,要在初始化selectpicker时要设置showSubtext为true。
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
<option data-subtext="ble">Mustard</option>
<option data-subtext="com">Relish</option>
</select>
<select class="selectpicker" data-size="5">
<option data-subtext="Heinz">Ketchup</option>
<option data-subtext="ble">Mustard</option>
<option data-subtext="com">Relish</option>
</select>
1.菜单显示项大小
通过data-size属性来限制菜单显示的条数，比如说option有8条，我们只展示5条,其余的通过滚动条显示。
<select class="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"来添加全选和全不选的按钮
<select class="selectpicker" multiple data-actions-box="true">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
设置data-divider="true"添加数据分割线。
<select class="selectpicker" data-size="5">
<option>Mustrad</option>
<option >Ketchup</option>
<option >Relish</option>
<option data-divider="true"></option>
<option>Mustrad</option>
<option >Ketchup</option>
<option >Relish</option>
</select>
4.添加菜单头
用data-header为下拉菜单设置菜单头
<select class="selectpicker" data-header="Select a condiment">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
5.设置菜单的上浮或者下浮
通过设置dropupAuto来设置菜单的上下浮动，dropupAuto默认为true，自动确定是否应显示的菜单上面或下面的选择框，如果设置为false，系统会加入一个dropup样式的上拉框。
$('.selectpicker').selectpicker({
'selectedText':'cat',
'dropupAuto':false
<select class="selectpicker dropup">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
