bootstrap selectpicker 下拉框使用详解

bootstrap selectpicker是bootstrap里比较简单的一个下拉框的组件，先看效果如下：

 附上官网api链接，http://silviomoreto.github.io/bootstrap-select/. 

拉框的使用上基本操作一般是：单选、多选、模糊搜索、动态赋值等，下面来看如何使用：

1、首先需要引入的css和js：

    bootstrap.css

    bootstrap-select.min.css

    jquery-1.11.3.min.js

    bootstrap.min.js

    bootstrap-select.min.js

2、js代码如下：

$(function() {
	$(".selectpicker").selectpicker({
		noneSelectedText : '请选择'//默认显示内容
    });

        
        //数据赋值
		var select = $("#slpk");
		select.append("<option value='1'>香蕉</option>");
		select.append("<option value='2'>苹果</option>");
		select.append("<option value='3'>橘子</option>");
		select.append("<option value='4'>石榴</option>");
		select.append("<option value='5'>棒棒糖</option>");
		select.append("<option value='6'>桃子</option>");
		select.append("<option value='7'>陶子</option>");
                //初始化刷新数据
		$(window).on('load', function() {
			$('.selectpicker').selectpicker('refresh');
		});
 });

3、jsp内容：

<select id="slpk" class="selectpicker" data-live-search="true" multiple></select>

设置multiple时为多选，data-live-search="true"时显示模糊搜索框，不设置或等于false时不显示。

4、下拉数据通过ajax从后台获取：

    $(function() {
		$(".selectpicker").selectpicker({
			noneSelectedText : '请选择'
		});
 
		$(window).on('load', function() {
			$('.selectpicker').selectpicker('val', '');
			$('.selectpicker').selectpicker('refresh');
		});
 
		//下拉数据加载
		$.ajax({
			type : 'get',
			url : basePath + "/lictran/tranStation/loadRoadForTranStationDetail",
			dataType : 'json',
			success : function(datas) {//返回list数据并循环获取
				var select = $("#slpk");
				for (var i = 0; i < datas.length; i++) {
					select.append("<option value='"+datas[i].ROAD_CODE+"'>"
							+ datas[i].ROAD_NAME + "</option>");
				}
				$('.selectpicker').selectpicker('val', '');
				$('.selectpicker').selectpicker('refresh');
			}
		});
	});

PS:

    特别需要注意的是：当使用ajax异步方式添加下拉框的option时，一定要使用 $('.selectpicker').selectpicker('refresh');  对下拉框进行刷新，不然不会显示异步添加的option.

其他的一些方法：

获取已选的项：

var selectedValues = [];    
$("#slpk:selected").each(function(){
    selectedValues.push($(this).val()); 
});

选择指定项（编辑回显使用）：

        单选：$('.selectpicker').selectpicker('val', ‘列表id’);

        多选：var arr=str.split(','); $('.selectpicker').selectpicker('val', arr);

.selectpicker('val') 可以通过调用val元素上的方法来设置所选值。：

$('.selectpicker').selectpicker('val', 'Mustard');

$('.selectpicker').selectpicker('val', ['Mustard','Relish']);　

这不同于val()直接在select元素上调用。如果val()直接调用元素， bootstrap-select ui将不会刷新（因为只从用户交互时触发事件）。你必须自己调用ui刷新方法。

$('.selectpicker').val('Mustard');

$('.selectpicker').selectpicker('render');

// this is the equivalent of the above

$('.selectpicker').selectpicker('val', 'Mustard');

.selectpicker('selectAll') 选择在multi-select模式下的所有选项。

$('.selectpicker').selectpicker('selectAll'); 　

.selectpicker('deselectAll') 这将取消选择在multi-select模式下的所有选项。

$('.selectpicker').selectpicker('deselectAll'); 　

.selectpicker('render') 可以强制使用该render方法重新渲染bootstrap-select ui 。如果当编程时更改任何相关值而影响元素布局，这将非常有用。

$('.selectpicker').selectpicker('render'); 　

.selectpicker('mobile') 手机可以滚动选项。这将启用手机的原生菜单以进行选择页面上的菜单。检测浏览器的方法由用户决定。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

  $('.selectpicker').selectpicker('mobile');

} 　

.selectpicker('setStyle')  修改与按钮本身或其容器相关联的类。

如果更换容器上的类：

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');　

 

如果更改按钮上的类（更改数据样式）：

$('.selectpicker').selectpicker('setStyle', 'btn-danger');      // Replace Class

$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');      // Add Class

$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove'); 　// Remove Class

.selectpicker('refresh')  为了使用JavaScript以编程方式更新select，首先操作select，然后使用该refresh方法更新UI以匹配新状态。对于删除或添加选项时，或通过JavaScript禁用/启用选择时，这是必需的。

$('.selectpicker').selectpicker('refresh');
<select class="selectpicker remove-example">
  <option value="Mustard">Mustard</option>
  <option value="Ketchup">Ketchup</option>
  <option value="Relish">Relish</option>
</select>
 
<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>
$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});
  
$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});
 
$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});

.selectpicker('toggle')   以编程方式切换bootstrap-select菜单的打开/关闭。

$('.selectpicker').selectpicker('toggle');

.selectpicker('hide') 以编程方式隐藏bootstrap-select使用hide方法（这仅影响bootstrap-select自身的可见性）。

$('.selectpicker').selectpicker('hide');

.selectpicker('show')   以编程方式显示bootstrap-select使用show方法（这仅影响引导选项本身的可见性）。

$('.selectpicker').selectpicker('show');

.selectpicker('destroy')  要以编程方式销毁bootstrap-select，请使用该destroy方法。

$('.selectpicker').selectpicker('destroy');

 

属性：

在Html中添加multiple表示支持多选，不需要额外添加其他属性，样式！当为多选状态，选中的对象为数组，当为单选状态，选中的对象为字符串。

noneSelectedText:'请选择'

liveSearch：true/false 启用搜索栏
liveSearchStyle：begins 搜索栏样式？

actionsBox：true/false 启用全选，清除按钮

item：0 设置第0项为只能单选状态

hideDisabled：true/false 设置启用/禁用隐藏

valueField 值字段

textField 显示文本字段

size 显示项目的个数

width 下拉框宽度 单位px

value 选中的值，以","分隔

multiple:"true" 单选或者多选

selectpicker其他属性