Bootstrap Select（下拉框控件）

Bootstrap Select：下拉框控件

官方网站 http://silviomoreto.github.io/bootstrap-select/

本章完全解读官方文档后所写，包含样式与事件介绍与使用。

因为CSDN文章容易样式问题，所以我把代码提供出来，复制到空页面打开即可。

上一张效果图：

	

		

			

				

					
Bootstrap Select 下拉框
				
				
基本select插件效果
				
为下拉框添加插件支持 ， class="selectpicker"
				

					
						A
						B
						C
					
				
				
				

				
单选模式示例
				
class="selectpicker show-tick" ， 选中项内容后添加" √ "小图标
				
title="请选择一项" ， 未设置默认选项并未选择时 ， 组件框中的提示内容
				
data-live-search="true" ， 为组件添加查询功能 
				
data-size="5" ， 设置下拉长度 
				

					
						A
						B
						C
						D
						E
						B
						C
					
				

				

				
多选模式示例
				
title="请选择一项" ， 未设置默认选项并未选择时 ， 组件框中的提示内容
				
data-live-search="true" ， 为组件添加查询功能 
				
data-size="5" ， 设置下拉长度 
				
multiple ， 添加可多选支持 
				
data-max-options="2" ， 设置最多可选个数 
				
该属性在设置data-max-options="2"后 ， 建议不使用data-actions-box="true" ， 该属性是添加"选择所有"和"全部取消选择"按钮
				

					
						A
						B
						C
						D
						E
						B
						C
					
				
				
				

				
分组选项示例
				
使用optgroup标签将选项分为一组， 下面介绍optgroup标签属性
				
label="分组名" ， 为分组添加名称 
				
data-subtext="追加内容" ， 为分组追加名称 
				

					
						
							A
						B
					
					
						C
						D
						
					
				
				
选项标签中属性介绍示例1
				
title="代称" ， 改变选项在组件框中显示内容， 相当于选项的代称
				
selected ， 默认选中
				
data-icon="图标代码"为选项前面添加小图标， 如果没设置
					title="代称"属性， 那么小图标随选项内容一起显示在组件框中
				
				
data-subtext="提示文字" ， 在选项内容后添加提示(淡灰色小2号字体)文字
				

					
						A类型选项
						B类型选项
						C类型选项
					
				
				
选项标签中属性介绍示例2
				
data-content="html代码" ， 使用该属性中的代码片段替换该选项的内容， 以及选中后在组件框中显示的也是该html代码
				
如果感觉显示在组件代码框中的内容不好 ， 使用title="代称" ， 改变选项在组件框中显示内容， 相当于选项的代称
				

					
						A选项
						B选项
						C选项
					
				
				
				

				
其他属性介绍
				
disabled ， 该属性设置在组件select标签中为禁用组件 ; 设置在分组标签(optgroup)中禁选该组 ; 设置在选项标签(option)中禁选该项。
				
data-divider="true" ， 在选项与下一选项中间添加分割线。
				

				
Core options(核心选项)
				
核心选项也就是一些属性，重要的属性已经在上面介绍完了
				
写法：data-选项名称:对应值，组合成属性
				
				

				
核心方法
				
$('#selectID').selectpicker('selectAll'); // 当为多选下拉框时 ，执行全部选中
				
$('#selectID').selectpicker('deselectAll'); // 当为多选下拉框时 ，执行全部取消选中
				
$('#selectID').selectpicker('refresh'); // 当你删除或者添加选项时 ，刷新代码
				
$('#selectID').selectpicker('hide'); // 隐藏下拉框
				
$('#selectID').selectpicker('show'); // 显示下拉框
				
				

				
核心事件
				
$('#selectID').on('show.bs.select', function (e) {}); // 当点击下拉框时，选项项窗体即将显示触发
				
$('#selectID').on('shown.bs.select', function (e) {}); // 当点击下拉框时，选项项窗体显示触发
				
$('#selectID').on('hide.bs.select', function (e) {}); // 当点击下拉框时，选项项窗体即将隐藏触发
				
$('#selectID').on('hidden.bs.select', function (e) {}); // 当点击下拉框时，选项项窗体隐藏触发
				
$('#selectID').on('loaded.bs.select', function (e) {}); // 当下拉框被初始化后触发
				
$('#selectID').on('refreshed.bs.select', function (e) {}); // 当刷新方法(也就是执行该方法.selectpicker('refresh'))下拉框时触发
				
$('#selectID').on('changed.bs.select', function (e) {}); // 当值被改变时触发