bootstrap-select 使用详解

下载地址：https://developer.snapappointments.com/bootstrap-select/

示例地址：https://developer.snapappointments.com/bootstrap-select/examples/

参数详解地址：https://developer.snapappointments.com/bootstrap-select/options/

事件方法地址：https://developer.snapappointments.com/bootstrap-select/methods/

一、简单使用示例

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	下拉选择改变事件

事件使用示例：

$('#mySelect').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
  // do something...
});