layui下拉框如何一次性选中多个值-Layui教程-PHP中文网

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

layui下拉框如何一次性选中多个值

layui原生select不支持一次性选中多个值

直接给 <select multiple></select> 加 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 原生 select DOM 行为，会导致下拉面板打开/关闭异常、滚动错位、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 数组两种格式：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

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()