layui原生select加multiple后form.render失效,需用formselects或xmselect;formselects-v4初始化失败主因是引入顺序错、select属性不规范、未等dom就绪;xmselect渲染失败多因el选择器无效或元素未插入dom。
原生 select 加 multiple 属性后,layui 的 form.render('select') 会失效,直接退化成浏览器默认多选框——这不是“能用”,而是“样式崩了、交互断了”。真要多选,必须用第三方插件,目前稳定、轻量、维护活跃的只有两个: formselects 和 xmselect。
formSelects-v4 初始化失败的常见原因
引入顺序错、select 标签属性写法不规范、没等 DOM 就绪就调用 formSelects.render(),这三类错误占初始化失败的 90% 以上。
-
formSelects-v4.js必须在layui.js之后、但layui.use外部加载;不能塞进layui.use([...])里再require -
select标签必须带xm-select="xxx"(注意不是id)或name属性,且不能同时有lay-ignore - 渲染必须放在
$(document).ready()或layui.ready()中,不能写在<script></script>标签顶部直执行 - 如果用了
multiple属性,formSelects会自动识别为多选模式;不加则默认单选
xmSelect 渲染后无法获取值?检查 el 参数和作用域
xmSelect.render() 的 el 参数必须是有效 CSS 选择器(如 '#demo1'),且该元素在调用时已存在于 DOM 中。常见坑是:元素在异步 Tab 页或弹层中动态插入,但 xmSelect.render() 在主页面加载时就执行了。
- 动态创建的容器,务必在插入 DOM 后再调用
xmSelect.render(),不要复用全局变量 -
getValue()返回的是数组,不是字符串;若需提交表单,得手动拼成逗号分隔字符串或赋给隐藏域 - 如果使用了
data配置项传入初始数据,selected: true字段才生效;仅靠value不会自动勾选 - 别在
form.on('submit', ...)里直接读demo1.getValue(),确保demo1变量在闭包内可访问
formSelects 远程搜索时 data.field 结构容易混淆
当开启 searchUrl 模式,formSelects 会自动发 GET 请求,并把用户输入内容作为 keyword 参数(可配 searchKey 修改)。但返回 JSON 必须是数组格式,且字段名必须匹配 keyName 和 valName 配置,否则下拉列表空白。
- 默认期望返回:
[{"name":"北京","value":"beijing"}, ...];若后端返回{"list":[...]},需用searchDataFilter函数转换 - 远程模式下,
getValue('selectId')仍返回数组,但值是字符串(如['beijing', 'shanghai']),不是对象 - 禁用拼音搜索可加
searchType: 'string',避免中文输入时匹配不到 - 首次加载不触发搜索,如需默认展示全部选项,得配合
data配置项或手动调一次formSelects.data('selectId', [...])
最易被忽略的一点:所有插件都依赖 jQuery,但 formSelects 显式要求 jQuery 3.2.1+,而 xmSelect 宣称“无依赖”实则内部用了 Promise 和 fetch,IE11 下必须补 polyfill。项目里混用多个插件时,别让它们的 CSS 互相覆盖——比如 formSelects-v4.css 和 xm-select.css 同时引入,下拉面板可能错位或消失。











