layui中拥有多个选中值的select（分享）

之前偶然在其他公司的项目中看过这样一个下拉框，点击展开，有复选框，可多选，如下图：

觉得不错，在一些页面场景应用上还是挺便捷美观的；在gitee上找到了模板，关键词：layui-select-ext

代码如下：

1.需要用一行div盒，自定义标签id（页面样式留了select作为对比）

<div class="layui-inline" style="width:600px">
	<label class="layui-form-label">部门</label>
	<!-- <select name="state" lay-filter="state" multiple lay-search>
		<option value="">请选择</option>
	</select> -->
	<div class="layui-input-block" id="tag_ids2"></div>
</div> 

2.引入拓展js包（模板文件已上传，非原创，免费下载）

3.在js中添加：

//模拟数据
var tagData = [{"id":1,"name":"人事部","status":0},{"id":2,"name":"广告部"},{"id":3,"name":"宣传部"},
	{"id":4,"name":"企划部"},{"id":5,"name":"业务部"},{"id":6,"name":"生产部"},{"id":7,"name":"销售部"}];  
//多选标签-所有配置
 var tagIns2 = selectM({
//元素容器id【必填】
elem: '#tag_ids2',
//候选数据串【必填】
data: tagData,
//默认选定值，
selected: [2,7], 			
//最多选中个数，若不设定则默认5
max : 6,
//发送的变量名
name: 'department',
//发送json串，每一个值的分隔符
delimiter: ',',
//候选项数据的键名
field: {idName:'id',titleName:'name'}
 });

4.注意：刷新，保留“tagIns2” 默认值

//搜索栏
var active = {
			search : function() { //搜索按钮
				……
			},
			add : function() { //添加
				……
			},
			refresh : function() { //刷新
				form.val("query",{name:"", fid:"",department:"", state:""});//重置form表单
				tagIns2.set();//为设定默认值
				table.reload(tableID,{//表格数据重新加载
					page:{
						curr:1,limit:5 // 页数重置
					},
					where:form.val("query")//表单提交
				});
			}
};

//绑定监听
$('#query-region .layui-btn').on('click', function() {
	var type = $(this).data('type');
	active[type] ? active[type].call(this) : '';
});

后端接收的是一串字符串（delimiter: ‘,’——通过分隔符“，”将所有值拼接成字符串），后端取值可以考虑采用split截断取成数组。

String[] de;
String department = req.getParameter("department");
if(StringUtils.isNotBlank(department))
	de=department.split(",");