目录

• selectpicker简介
• 一些api
• • 1.multiple
  • 2.data-none-selected-text
  • 3.data-style
  • 4.data-show-tick、data-live-search、data-none-results-text、data-actions-box、data-select-all-text、data-deselect-all-text
• 通过js控制
• • 一些其他api
  • • selectpicker("refresh")
• 使用Ajax从服务器获取数据实现二级联动
• • 前端代码
  • 后端代码
• 总结

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接收数组数据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($("").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实现二级联动的前后端代码。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！