bootstrap中select的使用（selectpicker）

selectpicker简介

在html中select是原生的html元素，通过引入css,js链接并且给select元素添加selectpicker类可以使用bootstrap风格的选择器：

<link href="/bootstrap-select-1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="/bootstrap-select-1.12.4/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker" >
</select>

（这个网址加载速度较慢，建议把css，js文件下载下来放到本地文件夹中引用。否则自己的网站加载也会很慢）
效果如下：

一些api

可以通过添加一些属性构建个性的select。

1.multiple

可以使select变为复选，即可以选多个。这时调用$("#selectId").val()返回的是一个数组(如果没有选择，返回null)。

<select class="selectpicker" multiple>
	<option>hello world！</option>
	<option>hello world！</option>
	<option>hello world！</option>
</select>

效果如下：

2.data-none-selected-text

修改select无选择时显示的文字。

<select class="selectpicker" multiple data-none-selected-text="请选择">
	<option>hello world！</option>
	<option>hello world！</option>
	<option>hello world！</option>
</select>

效果如图：

3.data-style

修改select的显示风格。例子：修改为btn-info风格（即提示信息按钮风格）

<select class="selectpicker" multiple data-none-selected-text="请选择" data-style="btn-info">
	<option>hello world！</option>
	<option>hello world！</option>
	<option>hello world！</option>
</select>

效果如下：

4.data-show-tick、data-live-search、data-none-results-text、data-actions-box、data-select-all-text、data-deselect-all-text

篇幅限制，直接介绍完几个常见的属性。
data-show-tick=“true”:在选中选项时显示对勾
data-live-search=“true”:显示选项搜索框
data-none-results-text=“没找到相应记录{0}”:在选项搜索框没有搜索到结果时提示语
data-actions-box=“true”:提供全选和取消全选按钮

<select class="selectpicker" multiple data-none-selected-text="请选择" data-style="btn-info" data-showTick="true" data-live-search="true"
		 data-none-results-text="没找到相应记录{0}" data-actions-box="true">
	<option>hello world！</option>
	<option>hello world！</option>
	<option>hello world！</option>
</select>

效果如下：

通过js控制

如果要为多个select添加如上效果，每个都写上属性的话代码太过臃肿。我们可以借用js实现动态添加。而且js也可以帮我们获取select值、动态改变内容等。通过selectpicker()方法可以调用提供的大量api。示例如下：

$("select").selectpicker({
	 showTick: true,
	 liveSearch: true,
	 noneResultsText: "没找到相应记录{0}",
	 actionsBox: true,
	 //取消全选按钮标题
	 deselectAllText: "取消全选",
	 //全选按钮标题
	 selectAllText: "全选"
});

上述代码为所有select元素添加了属性。

一些其他api

selectpicker(“refresh”)

可以刷新当前select状态，当select状态改变的时候调用可以更新外观，否则效果不显示（比如调用select.empty()方法后就需要调用此方法，不然不会清空）。

$("#selectId").selectpicker("refresh");

使用Ajax从服务器获取数据实现二级联动

前端代码

//为第一级select添加监听器
$("#fistSelect").change(function () {
	//清空二级select并刷新
    $("#secondSelect").empty();
    $("#secondSelect").selectpicker("refresh");
    //对一级select的值进行判断，避免向服务器传无用的数据引发异常
    if ($("#firstSelect").val() != null) {
    	//调用ajax方法
        $.ajax({
        	//服务器提供的接口，由后端选手提供(吐槽一句又前端又后端的我，真是又当爹又当妈)
        	//该网址返回一个JSON表达的数组（List，Set等）
            url: 'url',
            //向服务器发送的数据
            //注意用JSON.stringify()转换为JSON字符串，服务器接收的一般是一个JSON字符串而不应该是一个对象
            //服务器通过List<String>接收数组数据
            data: JSON.stringify($("#firstSelect").val()),
            //一些参数
            contentType: "application/json;charset-UTF-8",
            dataType: "json",
            type: "POST",
            //ajax成功调用后的回调函数，其中参数result就是服务器返回的JSON字符串表示的数组
            success: function (result) {
            	//遍历返回的结果数组，并把数组的内容添加到二级select中,并把添加的option的val设为该值
                result.forEach(secondSelectOption=> {
        			$("#secondSelect").append($("<option></option>").html(secondSelectOption).val(secondSelectOption));
			    });
			    //刷新
			    $("#secondSelect").selectpicker("refresh");
            }
        });
    }
});

后端代码

好了，我知道你后端也不太会。贴出Spring MVC的controller，当然用servlet也是完全可以的，只是取数据，转换数据为JSON比较麻烦，使用Spring MVC很方便。

//url为Spring MVC提供的访问网址，与前端ajax请求的网址要相同。
@RequestMapping("url")
//@ResponseBody表示网址返回JSON数据，并且可以对返回的所有Java对象自动转换为JSON格式
@ResponseBody
//@RequestBody标明参数是从ajax接收的数据，Spring MVC会把前端提供的数组JSON字符串自动封装为List
public Object secondaryLinkage(@RequestBody List<String> firstSelectVals) {
    //doSomeThing()根据自己的业务需求提供，
    List<String> result=doSomeThing(firstSelectVals);
    //直接把List返回，Spring MVC会把List转换为JSON数组
    return result;
}

总结

本文讲解了bootstrap风格的select，并提供了select通过Ajax实现二级联动的前后端代码。