话不多说上干活
实现效果展示：
首先新增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>
