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，页面中添加如下引用

html页面代码

 

        基础下拉：
        
            常州大学
            清华
            北大
            河海大学
        
    
    

        下拉多选：
        
            常州大学
            清华
            北大
            河海大学
        
    
    

        分组下拉：
        
            
                常州大学
                清华
                北大
                河海大学
            
           
                北京
                拉萨
                丽江
                上海
           
        
    
    

         检索下拉：
        
            常州大学
            清华
            北大
            河海大学
        
    
    

二、参数详解

参数名	参数类型	默认值	说明
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	当设置为整数并在多重选择中时，所选选项的数目不能超过给定的值。 此选项也可以作为的数据属性存在，在这种情况下，它只适用于该
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...
});