layui多选下拉框如何实现

layui 2.x 的 select 组件原生不支持多选，可靠替代方案为：①用 checkbox 模拟；②使用 formSelects-v4 插件（需引入、设 multiple 和 lay-filter、调用 render 方法），注意数据格式、手动校验及取值同步。

layui 的 select 默认不支持多选，得换方案

layui 2.x 最新 select 组件本身不提供多选功能（multiple 属性被忽略），强行加 multiple 不生效，也不会渲染勾选框或展示已选项。这不是你配置错了，是组件设计如此。

真正能用的替代方案只有两个：一是用 layui 自带的 checkbox 模拟（适合选项少、结构固定）；二是引入第三方增强组件，比如 layui-lu-select 或封装 layUI + select2（适合动态数据、需搜索/分页等场景）。

用 checkbox + formSelects 实现轻量多选

layui 社区广泛使用的 formSelects 是个轻量插件，不依赖 jQuery，兼容 layui 2.8+，支持远程加载、搜索、全选/反选，且样式和 layui 原生一致。

1. 下载 formSelects-v4.js（注意 v4 是 layui 2.x 专用版），放到项目 lib/ 目录下
2. 在页面中按顺序引入：layui.css → layui.js → formSelects-v4.js
3. select 标签必须有 lay-filter，且添加 multiple 属性（这是 formSelects 的识别标识）
4. 初始化时调用 formSelects.render('filterName')，不是 form.render()

示例 HTML：

<select multiple lay-filter="city" id="city"><option value="bj">北京</option><option value="sh">上海</option><option value="gz">广州</option></select>

JS 初始化：

formSelects.render('city');

动态加载数据时，data 格式必须为数组对象

formSelects 的远程加载（url 参数）返回的数据必须是形如 [{name: '上海', value: 'sh'}, ...] 的数组，不能是 {data: [...]} 这类嵌套结构——否则选项不显示，控制台也无报错，容易卡住排查。

1. 后端返回前请用 formSelects.dataFilter 预处理，比如：dataFilter: function(data){ return data.list || []; }
2. 若用 lay-data 写死静态数据，格式同上，别写成字符串数组 ['sh','bj']
3. 选中值默认以逗号拼接字符串返回（form.on('select(filter)', ...) 中的 value），如需数组，用 formSelects.value('filterName', 'val') 主动取

和 layui 表单验证一起用，要手动触发校验

formSelects 选中后不会自动触发 form.verify，也不会写入 form.val() 的表单数据里——它维护的是独立状态。如果用了 required 或自定义验证规则，必须额外监听变化并手动校验。

1. 监听方式：formSelects.on('city', function(id, vals, elem){ ... })，其中 vals 是当前选中的 value 数组
2. 触发验证：form.validate('formFilter') 或调用 form.verify 中对应规则函数
3. 提交前建议统一用 formSelects.value('city') 取值，再塞进 form.val() 对象里，避免遗漏

这个衔接点最容易漏，表单看着提交了，后端却收不到多选字段。