基于客户需求 需要一个select 多选 下拉框。
前台框架使用layUI 于是进行查找—》formSelects 4.x 这是layUI的一个第三方插件 但是看了一下发现已经停止维护了!!!
后来使用 xm-select
官网:https://maplemei.gitee.io/xm-select/#/component/install
这个使用就非常简单了只需要引入lyaui和自身的js就可以了
xm-select.js:https://gitee.com/maplemei/xm-select/releases
找到最新版本下载zip 解压,再放入项目中即可,下来就是正式的应用了。
引入js
<script type="text/javascript" src="<%=basePath%>CustomerserviceJs/jquery-1.10.2.min.js"></script>
<script src="<%=basePath%>lib/layui/layui.js" charset="utf-8"></script>
<script src="<%=basePath%>lib/layui/xm-select.js" charset="utf-8"></script>
页面中放入占位标签
<div id="demo1" class="xm-select-demo" ></div>
js初始化
<script type="text/javascript">
var data = ${
data}; //后台实体类转json后的数据
var val = [];
var oldVal = "${notic.range}"; //已选中的值
for(var i = 0; i < data.length; i++){
//循环所有选项
if(oldVal.indexOf(data[i].rescode) != -1){
//判断是否需要默认选中
var con = {
name:data[i].resname, value:data[i].rescode, selected: true, disabled: true};
} else {
if(oldVal){
// 判断是否需要加disable属性
var con = {
name:data[i].resname, value:data[i].rescode, disabled: true};
} else {
// 正常
var con = {
name:data[i].resname, value:data[i].rescode};
}
}
val.push(con);
}
var demo1= xmSelect.render({
el: '#demo1'
,data: val
})
</script>
官方示例:
上面的这些代码都是基于业务需要,
点击查看时:将之前已选中的数据选中然后加上disable 防止操作。可进行修改。
下来再说一下如何获取选中的值
var val = xmSelect.get('#demo1', true).getValue('valueStr'); // 获取选中的Id并用 "," 拼接。
var val = xmSelect.get('#demo1', true).getValue('nameStr'); // 获取选中的name并用 "," 拼接。
然后再将值传入后台。 具体操作可以看官方文档。
OK 到这来问题就解决了!!!