bootstrap-select 插件使用详解

一、简单使用示例

1、下载bootstrap-select，创建页面SelectDemo，页面中添加如下引用

<script src="Scripts/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="Scripts/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>
<link href="Scripts/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />

HTML代码：

<div class="form-group">基础下拉：<select id="basicSelect"><option value="1">常学</option><option value="2">清华</option><option value="3">北大</option><option value="4">河学</option></select></div><div class="form-group">下拉多选：<select id="multiSelect" multiple><option value="1">常学</option><option value="2">清华</option><option value="3">北大</option><option value="4">河学</option></select></div><div class="form-group">分组下拉：<select id="groupSelect"><optgroup label="school"><option value="1">常学</option><option value="2">清华</option><option value="3">北大</option><option value="4">河学</option></optgroup><optgroup label="city"><option value="1">北京</option><option value="2">拉萨</option><option value="3">丽江</option><option value="4">上海</option></optgroup></select></div><div class="form-group">检索下拉：<select id="searchSelect"><option value="1">常学</option><option value="2">清华</option><option value="3">北大</option><option value="4">河学</option></select></div><script>$(function () {$("#basicSelect").selectpicker({ width: 120 });$("#multiSelect").selectpicker({ width: 120 });$("#groupSelect").selectpicker({ width: 120 });$("#searchSelect").selectpicker({ width: 120, liveSearch: true,liveSearchPlaceholder: "数据检索" });})</script>

详细参数：

参数名   参数类型   默认值   说明
actionsBox   boolean   false   设置为true时，在下拉菜单顶部添加两个按钮（全选&全选）
container   string | false   false   当设置为字符串时，将select附加到特定元素或选择器，例如container:'body''.main body'
countSelectedText   string | function   function
设置当selectedtextformat为count或count>时显示的文本格式。0为所选金额。1可供选择。

当设置为函数时，第一个参数是所选选项的数目，第二个参数是选项的总数。函数必须返回字符串。

deselectAllText   string   'Deselect All'   启用ActionsBox时，按钮上取消选择所有选项的文本
dropdownAlignRight   boolean | 'auto'   false   将菜单右对齐，而不是左对齐。如果设置为“自动”，则当左对齐时，如果菜单的全宽没有空间，则菜单将自动右对齐。
dropupAuto   boolean   true   检查是否有更多的空间，上面或下面。如果升降器有足够的空间正常完全打开，但上面有更多的空间，则升降器仍然正常打开。否则，它会变成一个下拉列表。如果DropupAuto设置为false，则必须手动调用Dropus。
header   string   false   在菜单顶部添加标题；默认情况下包括关闭按钮
hideDisabled   boolean   false   从菜单中删除禁用的选项和optgroups data hide disabled:true
iconBase   string   'glyphicon'   将基础设置为使用不同的图标字体而不是字形图标。如果更改IconBase，您可能还需要更改TickIcon，以防新图标字体使用不同的命名方案。
liveSearch   boolean   false   设置为true时，将搜索框添加到SelectPicker下拉列表的顶部
liveSearchNormalize   boolean   false   将LiveSearchNormalize设置为true允许不区分重音的搜索
liveSearchPlaceholder   string   null   检索文本框中的默认提示文字
liveSearchStyle   string   'contains'   当设置为“contains”时，搜索将显示包含搜索文本的选项。例如，搜索带有返回苹果、李子和车前草的pl。当设置为“startswith”时，搜索pl将只返回李子和车前草
maxOptions   integer | false   false
当设置为整数并在多重选择中时，所选选项的数目不能超过给定的值。

此选项也可以作为<optgroup>的数据属性存在，在这种情况下，它只适用于该<optgroup>

maxOptionsText string | array | function function
启用MaxOptions并选择给定方案的最大选项数时显示的文本。

如果使用函数，它必须返回一个数组。array[0]是将maxoptions应用于整个select元素时使用的文本。array[1]是在optgroup上使用maxoptions时使用的文本。如果使用字符串，则元素和optgroup都使用相同的文本。

mobile   boolean   false   设置为true时，启用设备的本地菜单以选择菜单
multipleSeparator   string   ', '   下拉多选时，选择项的分隔符号
noneSelectedText   string   'Nothing selected'   当多选没有选定选项时显示的文本
noneResultsText   string   'No results matched {0}'   搜索不返回任何结果时显示的文本
selectAllText   string   'Select All'   启用ActionsBox时，全选按钮上的显示文本
selectedTextFormat   'values' | 'static' | 'count' | 'count > x' (where x is an integer)   'values'
指定如何使用多选显示所选内容。

“values”显示所选选项的列表（由multipleseparator分隔）。static“只显示select元素的标题。”count'显示所选选项的总数。'count>x'的行为类似于“values”，直到所选选项的数目大于x；之后，它的行为类似于“count”

selectOnTab   boolean   false   设置为true时，将制表符视为SelectPicker下拉列表中的Enter或空格字符
showContent   boolean   true   设置为true时，在按钮中显示与所选选项关联的自定义HTML。当设置为false时，将显示选项值。
showIcon   boolean   true   设置为true时，显示与按钮中选定选项关联的图标
showSubtext   boolean   false   设置为true时，显示与按钮中选定选项关联的子文本
showTick   boolean   false   在所选选项上显示选中标记（对于没有多个属性的项目）
size   'auto' | integer | false   'auto'
当设置为“auto”时，菜单总是打开以显示窗口允许的尽可能多的项目，而不会被关闭。

当设置为整数时，菜单将显示给定的项目数，即使下拉菜单被关闭。

当设置为false时，菜单将始终显示所有项目。

style   string | null   null   当设置为字符串时，将值添加到按钮的样式中
tickIcon   string   'glyphicon-ok'   设置要用作所选选项旁边的“勾号”的图标
title   string | null   null   选择器的默认标题
virtualScroll   boolean | integer   600   如果启用，则将使用虚拟化呈现下拉列表中的项目（即，仅呈现视区内的项目）。这大大提高了具有大量选项的选择的性能。设置为整数以仅在选择至少具有该数量的选项时使用虚拟化。
width   'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px)   false
当设置为auto时，会自动调整选择器的宽度以适应最宽的选项。

当设置为CSS宽度时，selectPicker的宽度被强制内联为给定值。

当设置为false时，所有宽度信息都将被删除。

windowPadding   integer | array   0   这在窗口具有下拉菜单不应覆盖的区域（例如固定标题）的情况下非常有用。当设置为整数时，相同的填充将添加到所有边。或者，整数数组可以格式[上、右、下、左]使用。
三、事件详解
事件   说明
show.bs.select   显示下拉列表
shown.bs.select   当下拉列表对用户可见时（将等待CSS转换完成），将激发此事件
hide.bs.select   隐藏下拉列表
hidden.bs.select   当下拉列表对用户隐藏完毕（将等待CSS转换完成）时，将激发此事件
loaded.bs.select   初始化下拉列表
rendered.bs.select   调用实例下拉
refreshed.bs.select   刷新下拉列表
changed.bs.select   下拉选择改变事件