jQuery|下拉插件select2使用总结 jQuery|select2

1.组件说明

Select2使用示例地址：https://select2.github.io/examples.html
Select2参数文档说明：https://select2.github.io/options.html
Select2源码：https://github.com/select2/select2
使用select2首先需要引入其js及css文件
官网下载地址：https://select2.org/getting-started/installation
csdn下载地址：https://download.csdn.net/download/u012669164/11001682
select2-bootstrap.css是bootstrap风格的select2样式，应用该文件后不需要引入默认样式

2.组件使用效果

多选

文章图片

设置最多只能选几个

文章图片

远程搜索功能，输入文本动态后台过滤

文章图片

滚动条滚动到底部自动加载剩余项

文章图片

3.使用代码示例

html

使用js初始化，加载远程数据
$('#territorialId').select2({
language:"zn-CN",
placeholder:'请选择',
allowClear: true,//可以清除选项
ajax: {
url: "/territorial/listSelect",
data: function (params) {
return {
keyWord: params.term || '',//搜索参数
page: params.page || 1,//分页参数
rows: params.pagesize || 10,//每次查询10条记录
};
},
processResults: function (data, params) {
params.page = params.page || 1;
var list = data.list;
list = $.map(list, function (obj) {
obj.text = obj.text || obj.terrName;
return obj;
});
return {
results:list,
pagination: {
more: (params.page) < data.totalPage
}
};
}
}
});
1.url是请求的后台地址
2.使用后台动态加载数据时传入请求参数params
3.processResults接收后台返回数据，该回调函数返回一个对象，包含results、pagination属性，后台分也是必须返回pagination，pagination中的more用来判断是否还有下一页
4.results属性为js对象数据，数组元素中必须包含id，text属性
【jQuery|下拉插件select2使用总结】list = $.map(list, function (obj) {
obj.text = obj.text || obj.terrName;
return obj;
});
这段代码用来将返回数组中terrName替换为text

后台代码

@RequestMapping(value = "https://www.it610.com/listSelect")
@ResponseBody
public Object listSelect(Select2QueryParamsDto param) {
EntityWrapper warp = new EntityWrapper<>();
Wrapper wrapper = warp.eq("1", 1);
if (null != param.getKeyWord() && !"".equals(param.getKeyWord().trim())) {
wrapper.like("terr_name", param.getKeyWord());
}
List list = territorialService.selectList(wrapper);
return Select2Util.initSelectResponse(list,param);
}
后台使用mybatisplus，所以采用这种查询数据的方式，可以自己xiesql查询数据
Select2QueryParamsDto.java
public class Select2QueryParamsDto {
private String keyWord;
private Integer page;
private Integer rows;
}
getter、setter方法省略
Select2Util.java
public class Select2Util {
@SuppressWarnings("rawtypes")
public static Map initSelectResponse(List list,Select2QueryParamsDto param){
Map map = new HashMap<>();
int startIndex = param.getPage().intValue() - 1;
int endIndex = param.getPage().intValue() * param.getRows().intValue() - 1;
double totalPage = Math.ceil((double)list.size() /(double) param.getRows().intValue());
if(list.size() < endIndex) {
list = list.subList(startIndex, list.size());
}else {
list = list.subList(startIndex, endIndex);
}
map.put("list", list);
map.put("totalPage", totalPage);
return map;
}
}

使用方法

绑定方法，选中下拉框选项后的回调，select2应该有自己的回调，这里使用的是jquery的on方法
$("#projectId").on("change", function (e) {
var value= https://www.it610.com/article/$("#territorialId").select2("val");
if(null != value && "" != value){
//do something
}
});
获取选中值
$("#territorialId").select2("val");
取消选中
$("#territorialId").select2("val","all");
编辑/修改页面中设置默认选中值
如果是从后台加载下拉选项数据，select2是在点击时加载数据，需要页面加载完就设置值就得手动添加