必须用 xm-select 渲染多选,因 layui 2.x 完全不支持原生 select[multiple],form.render() 和 form.on('select') 均为单选设计,无法触发正确事件、同步值或提交数组;需手动将 instance.getvalue() 结果写入隐藏域或 form.val() 才能通过验证并提交。
直接用 xm-select,别碰原生 select[multiple] —— layui 2.x 完全不识别它,写了也白写,还会干扰表单验证逻辑。
为什么不能直接写 select[multiple]?
Layui 的 form.render() 和 form.on('select') 都是为单选设计的。你加了 multiple 属性,Layui 不会渲染任何多选 UI,也不触发正确事件,this.value 永远是空字符串或第一个选中项,后端收不到数组。
- 常见错误现象:
console.log(this.value)打印出""或单个值,但页面上明明勾了三个选项 - 真实使用场景:权限分配、商品属性筛选、标签批量选择——这些都需要提交数组,且要求带搜索、回显、禁用项
- 根本原因:Layui 的
laySelect内部只监听click并调用setThisValue,压根没处理 multiple 的 DOM 状态同步
xm-select.render() 必填参数和最小可用配置
必须传 el(容器)和 data,multiple: true 是开启多选的开关,不是可选项。
-
el:必须是 DOM 元素或 CSS 选择器,比如'#roleSelect'或document.getElementById('roleSelect');不能写成select标签本身,xm-select渲染的是悬浮面板,不是增强原生 select -
data:数组格式,每个对象至少含name和value,value类型必须与后端接收字段一致(如 number 或 string) -
multiple: true:漏掉这行,组件默认当单选用,点第二项就会取消第一项 - 示例最小配置:
layui.use(['xmSelect'], function() {
var xmSelect = layui.xmSelect
xmSelect.render({
el: '#roleSelect',
data: [
{name: '管理员', value: 1},
{name: '编辑', value: 2},
{name: '审核员', value: 3}
],
multiple: true
})
})
默认选中、数量限制和远程搜索怎么配?
value 必须是数组,哪怕只默认选一个也要写成 [1];max 设了就硬限制,超了点不动;远程搜索不是开个开关就行,得配合后端接口返回标准结构。
-
value: [1, 3]:默认选中“管理员”和“审核员”,注意类型要和data里value一致(都是 number 或都是 string) -
max: 2:最多选两项,第三项点击时无响应,也不触发on: select -
searchType: 'server'+remoteMethod:必须返回{code: 0, data: [...]}结构,data数组格式同本地data;不要用$.get直接塞进data,那是本地搜索 - 容易踩的坑:
toolbar: {show: true}默认显示“清空”“全选”,但“全选”按钮在max限制下仍会尝试全选,导致 UI 卡住——建议设toolbar: {show: false}或手动控制
取值、赋值和表单提交怎么对接 Layui 验证?
xm-select 不自动写入隐藏域,也不触发 form.on('submit') 的原始字段,必须手动同步到真实表单控件,否则 form.val() 拿不到值,lay-verify 也校验不了。
- 取值用
instance.getValue(),返回数组,如[1, 2];不要用$('#xxx').val(),那永远是空 - 赋值用
instance.setValue([{name: '新选项', value: 999}]),注意是对象数组,不是纯 value 数组 - 提交前必须把值写进隐藏域:
<input type="hidden" name="roles" id="rolesInput">,然后$('#rolesInput').val(JSON.stringify(demo.getValue()));或者用form.val('formFilter', {roles: demo.getValue()})主动注入 - 关键提醒:Layui 的
form.verify是基于name属性匹配的,所以隐藏域的name必须和后端字段名一致,且不能依赖xm-select自己生成的 DOM
最常被忽略的是表单同步环节——很多人以为 xm-select 渲染完就能直接提交,结果后端收不到数据,debug 半天才发现没往隐藏域写值。它本质是个独立 UI 层,和 Layui 表单系统是松耦合的,桥要自己搭。











