引入css和js

//<th:block th:include="include :: layui-formSelects-css"/>
<link th:href="@{/ajax/libs/layui-formSelects/formSelects-v4.css}" rel="stylesheet"/>
//<th:block th:include="include :: jsPinyin-js"/>//开启拼音模糊搜索
<script th:src="@{/ajax/libs/tlink/lay/modules/js-pinyin.js}"></script>

html:

<!--弹窗-->
注意：layui.open中的弹窗中的内容单独写在页面里，不要在js里面直接渲染，可能导致多选组件失效。
<form class="layui-form add-form" id="list-form" lay-filter="list-form" style="display: none;margin:20px"><div class="layui-form-item"><label class="layui-form-label">用户</label><div class="layui-input-block new-input-block"><select id="controlList" name="controlList"  lay-filter="controlList" xm-select="controlList" xm-select-search="" xm-select-search-type="dl"xm-select-skin="normal"><option value="">请选择</option><option value="1">11</option><option value="2">22</option></select></div></div>
</form>

js:

layui.extend(
{formSelects : '/ajax/libs/layui-formSelects/formSelects-v4',})
layui.use(['laypage', 'layer', 'tree', 'form', 'layarea', 'formSelects'], function () {var laypage = layui.laypage, layer = layui.layer, tree = layui.treeform = layui.formvar laydate = layui.laydate;//日期时间模块var laypage = layui.laypage;//分页模块var laytpl = layui.laytpl;var layarea = layui.layarea;var formSelects = layui.formSelects;//载入自定义多选组件// 用于复现之前选中的值formSelects.value('controlList', ['1','2'], true); // true表示是否渲染到DOM上，默认为true// formSelects.render('controlList'); // 初始化名为controlList的选择器(不要也可)$(document).on("click",".lists",function (){layer.open({type: 1,title: '用户设置',shade: 0.1,area: ['635px', '500px'],btn: ['确定', '取消'],content:$('#list-form'), success: function (layero, index) {//formSelects.render('controlList'); // 确保在弹窗中重新渲染选择器(不要也可)}, btn1: function (index) {//确定// form.render()var value1 = formSelects.value('controlList');  // [{"name":"11","val":"1"},{"name":"22","val":"2"}]var value2 = formSelects.value('controlList', 'value'); // [{"name":"11","val":"1"},{"name":"22","val":"2"}]var value3 = formSelects.value('controlList','all'); // [{"name":"11","val":"1"},{"name":"22","val":"2"}]var value4 = formSelects.value('controlList','val'); // ["1","2"]var value5 = formSelects.value('controlList','valStr'); // 1,2 字符串var value6 = formSelects.value('controlList','name'); // ["11","22"]console.log(value1,'参数：无');console.log(value2,'参数：value');console.log(value3,'参数：all');console.log(value4,'参数：val');console.log(value5,'参数：valStr');console.log(value6,'参数：name');}, btn2: function () {//取消}})})//开启拼音模糊搜索formSelects.filter(null, function(id, inputVal, val, isDisabled){if(PY.fullPY(val.name).toLowerCase().indexOf(inputVal) != -1 ||    //拼音全拼是否包含PY.fullPY(val.name, true).indexOf(inputVal) != -1 ||            //拼音简拼是否包含val.name.indexOf(inputVal) != -1                                //文本是否包含){return false;}return true;});})

效果：

或者直接在标签上回显：
参考：https://blog.csdn.net/wang_59881/article/details/133383510?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-0-133383510-blog-130152832.235^v43pc_blog_bottom_relevance_base7&spm=1001.2101.3001.4242.1&utm_relevant_index=2

// 新增代码
<label class="col-sm-3 control-label">通道：</label><div class="col-sm-8"><select name="channelIds" multiple id="channelIds" class="form-control"><option th:each="channel:${channels}" th:value="*{channel.id}" th:text="${channel.channelName}"></option></select></div>

// 编辑回显
<label class="col-sm-3 control-label">通道权限</label><div class="col-sm-8"><select name="channelIds" multiple id="channelIds" class="form-control"><option th:each="channel:${channels}" th:value="*{channel.id}" th:text="${channel.channelName}"th:selected="${selectChannels.contains(channel.id)}"></option></select></div>

编辑回显重点是th:selected=“${selectChannels.contains(channel.id)}”
selectChannels是后端返回的已绑定的通道列表，channels是通道列表