bootstrap selectpicker 选择框使用技巧及常见的一些方法

        最近项目要用一个选择框，可模糊搜索，可全选，及取消全选的选择框，在各个选择框插件中遇到了selectpicker这个插件，觉得这个插件强大，看着也比较舒服，下面介绍一下它的一些使用方法。

其中，会比较多使用到的如：

// refresh方法更新选项以匹配新状态
$('.selectpicker').selectpicker('refresh');
// 选中多选中的所有项目
$('.selectpicker').selectpicker('selectAll');
// 取消选择(清空)多选中的所有项目
$('.selectpicker').selectpicker('deselectAll');
// 获取select框中所有选中的值
$('.selectpicker').selectpicker('val', 'Mustard'); 
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

 下面使用 selectpicker 实现两级联动

HTML代码：

	模糊查询
	精确查询



	水果
	蔬菜

JS代码：

// 实现两级联动
function selectMetaDataKey() {
	var x = $("#type");  
	var y = $("#Key");  
	y[0].options.length = 0; // 清除Key下拉框的所有内容  
	if(x[0].selectedIndex == 0) {  
		//y[0].options.add(new Option("水果", "fruit", false, true));  // 默认选中fruit
		y[0].options.add(new Option("苹果", "apple", false, true));  // 默认选中apple
		y[0].options.add(new Option("香蕉", "banana"));  
	}  
	if(x[0].selectedIndex == 1) {  
		y[0].options.add(new Option("水果", "fruit", false, true));  // 默认选中fruit
		y[0].options.add(new Option("蔬菜", "vegetables"));
	}  
	x.selectpicker('refresh');
	y.selectpicker('refresh');
} 

 

以下是关于 selectpicker 的使用博客：

bootstrap selectpicker 下拉框使用详解

selectpicker的使用方法

selectpicker 使用简介附样例