bootstrap-select.js是一款Bootstrap下拉框功能增强插件。它为bootstrap下拉框增加了分组功能，多选功能，搜索功能，自定义内容和图标等多种功能，非常强大。
使用方法
在页面中引入jquery和bootstrap相关文件，以及bootstrap-select.js和bootstrap-select.css文件。
HTML结构
带分组的下拉选择框（Select boxes with optgroups）
多选下拉框（Multiple select boxes）
带搜索功能的下拉框（Live search）
关键词（Key words）
限制选择的数量（Limit the number of selections）
自定义占位文本（Placeholder）
替换文本（Selected text）
多选下拉框的显示格式（Selected text format）
通过data-selected-text-format属性，可以指定在多选下拉框选择选项后的显示格式。支持的属性有：
values：用逗号分隔选择项。（默认）count：当选项等于一个时，显示选择选项的数量。count > x：当选项大于某个数值时，从显示逗号分隔的多个值改为显示选择的数量。static：总是显示选择的替换文本。
按钮样式（Button classes）
通过data-style属性来为下拉框设置情景样式。
勾选图标（Checkmark on selected option）
在已经选择的选项上添加勾选图标。
下拉框箭头（Menu arrow）
为下拉框添加一个箭头。
自定义分割线样式（Style individual options）
可以自定义分割线样式。
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
下拉框宽度（Width）
可以自定义下拉框的宽度。
还可以通过data-width属性来设置下拉框的宽度。
图标（Icons）
可以通过data-icon属性来为选项设置一个图标。
自定义内容（Custom content）
可以通过data-content属性来为选项插入HTML内容。
子文本（Subtext）
可以通过data-size属性来为选项添加一个子描述文本。
菜单显示多少项（Menu size）
菜单的尺寸默认为auto。如果设置菜单尺寸为false或0，则显示所有的菜单项。你可以通过data-size属性来设置指定的菜单尺寸。下面的菜单只显示2项。
全选或全不选（Select/deselect all options）
通过data-actions-box="true"来对下拉框进行全选或全不选。
分隔线（Divider）
通过data-divider="true"来设置下拉框的分隔线。
菜单头部（Menu header）
通过data-header来设置下拉框设置一个菜单头选项。
箭头方向（Dropup menu）
通过.dropupclass来手动设置小箭头的方向为向上方向。
禁用下拉框（Disabled select box）
通过disabled属性来禁用下拉框。
禁用菜单项（Disabled options）
通过为菜单项添加.disabled属性来禁用它。
禁用下拉框分组（Disabled option groups）
通过为分组添加.disabled属性来禁用它。
Bootstrap下拉框功能增强插件Bootstrap-select.js的github地址为：https://github.com/snapappointments/bootstrap-select
粤公网安备 44011102002787号