layui实现下拉多选列表（xm-select.js插件使用，后台添加或修改数据回显提交问题总结）

话不多说上干活

实现效果展示：

 

首先新增 xm-select.js插件

//后台传输用来查询是否新增还是修改
model.addAttribute("updatAppNameList", null);
//上传多选下拉列表参数
model.addAttribute("appNameList", JSONUtil.toJsonStr(appName));




//多选框标标签
<div class="layui-form-item">
    <div id="appNames" name="appNames"></div>
</div>



//前端页面获取后台传输值
<span th:text="${appNameList}" style="display: none" id="appNameList"></span>
<span th:text="${updatAppNameList}" style="display: none" id="updatAppNameList"></span>

//引入插件
<script type="text/javascript" th:src="@{/js/xm-select.js}"></script>
<script type="text/javascript">
//app地区关联
	//创建一个appdata集合
        var appdata = new Array();
	//获取后台传输的多选下拉列表参数
        var appdataList = eval('(' + $("#appNameList").text() + ')');
	//定义一个循环初始值
        var i = 0
	//获取是新增还是修改的标识
        var updatAppNames = document.getElementById("updatAppNameList");
        if (updatAppNames.innerText.length == 0) {
            //新增绑定app
            $.each(appdataList, function(index, value) {
	    	//新增绑定所有数据
                appdata[i] = {name: value, value: index};
                i++;
            });
        } else {
            var updatAppNameList = eval('(' + $("#updatAppNameList").text() + ')');
            //修改回显绑定app
            //循环整个app列表
            $.each(appdataList, function(index, value) {
                appdata[i] = {name: value, value: index};
                //循环回显列表
                $.each(updatAppNameList, function(updatIndex, updatValue) {
                    if (index == updatValue) {
		    	//把后台传输的数据种与后台需要回显的数据重合并设置选中
                        appdata[i] = {name: value, value: index,selected: true};
                    }
                })
                i++;
            });
        }
	//获取到多选列表要展示的数据appdata，并绑定多选框
        var appName1 = xmSelect.render({
            el: '#appNames',
            language: 'zn',
            data: appdata
        })
	//当提交的时候把选中的参数在反给后台
	$("#submit").click(
            function () {
                //方法具体内容
                var appName = document.getElementById("appName");
                if (appName != null) {
                    var applist = appName1.getValue('valueStr');
                    appName.value = applist;
                }
            })
</script>