layui原生select不支持多选,必须用formSelects-v4或xm-select等插件实现;formSelects.value()或xmSelect.setValue()可批量赋值,且需在layui.use回调中执行。

layui原生select不支持一次性选中多个值
直接给 <select multiple> 加 multiple 属性,再用 JS 设置 select.value 或操作 option.selected,在 layui 2.x 中完全无效。因为 layui 的 form.render('select') 会忽略 multiple,只按单选逻辑初始化下拉面板,DOM 上的勾选状态不会同步到 UI,点击后也只会关闭面板、不响应多选行为。
常见错误现象包括:select.value 始终为空字符串;调用 form.on('select()') 收不到任何触发;用 jQuery 的 $('select').val(['a','b']) 后界面无变化。
- layui 官方文档和源码明确只实现单选渲染逻辑,不存在
multiple: true配置项 - 强行 patch 原生
selectDOM 行为,会导致下拉面板打开/关闭异常、滚动错位、IE11 兼容性崩溃 - 表单提交时,隐藏的原生
select元素仍只提交第一个选中值(或空),无法满足后端接收数组的需求
必须用 formSelects-v4 初始化才能批量赋值
formSelects.render() 是唯一稳定支持“一次性选中多个值”的方案。它不依赖原生 select 的 multiple 行为,而是接管整个渲染流程,把选项转为带复选框的下拉列表,并提供 value() 方法直接设置数组。
初始化后,用 formSelects.value('mySelect', ['java', 'python']) 即可立刻勾选对应项并刷新 UI,无需遍历 DOM 或模拟点击。
- 参数必须是字符串数组,如
['1', '3', '5'],不能是逗号字符串'1,3,5'或数字数组[1,3,5] - 如果选项数据来自异步加载(如 AJAX),需等
formSelects.render()的 success 回调执行完毕后再调用value() - 若初始化时已传入
data数组,其中对象含selected: true字段,也会自动勾选——但该方式不适用于运行时动态赋值
xm-select 也能批量设置,但 API 不同
如果你选用 xm-select 插件,批量选中靠的是 setValue() 方法,且接受对象数组或 value 数组两种格式:
xmSelect.render({ el: '#demo', data: [...] }) 返回实例,记为 ins,之后调用 ins.setValue(['1','2']) 或 ins.setValue([{value:'1'}, {value:'2'}]) 均可生效。
- 注意:
xm-select的setValue()不会触发 change 回调,如需响应,得手动调用ins.getValue()后做后续处理 - 它不兼容
formSelects的btnClear参数,清空需调用ins.setValue([]) - 若后端返回的是字符串数组(如
["admin","editor"]),直接传给setValue()即可,无需转换结构
别在 form.on('select()') 里取多选值
无论用 formSelects 还是 xm-select,原生 form.on('select(filterName)') 都监听不到多选变化。因为真实 select 元素被隐藏,它的 change 事件根本不会触发。
必须改用插件自己的监听方式:
-
formSelects.on('mySelect', function(id, vals) { ... })——vals是当前选中项数组,每个元素是对象{id: '1', name: 'Java'} -
xmSelect.on('demo', function(res) { ... })——res.arr是选中项数组,res.val是 value 字符串数组 - 表单提交前取值,也必须调用插件方法:
formSelects.value('mySelect')或ins.getValue('value'),而非$('select[name="mySelect"]').val()
最容易被忽略的是:插件初始化和赋值的执行顺序。如果 JS 在 DOM 尚未就绪时就调用 render() 或 value(),会静默失败——务必包裹在 layui.use([...], function(){...}) 内,或确保 DOM 已挂载。


















