formselects.render 的 type 参数必须设为 'checkbox' 才能启用多选功能,否则默认为单选;需正确引入 formselects-v4.js 及依赖,取值赋值须用 formselects.value(),表格中需在 done 和 page.jump 中重复初始化。

formSelects.render 的 type 参数必须设为 'checkbox'
原生 select 加 multiple 属性在 Layui 里不会自动变成多选下拉框,Layui 自带的 form.select 也不支持多选。真正起作用的是第三方插件 formSelects,它的多选行为由 type: 'checkbox' 控制。
常见错误是漏写或写成 'radio'、'default',甚至直接省略——这都会退化为单选模式。
-
type: 'checkbox'→ 多选(带复选框) -
type: 'radio'→ 单选(带单选按钮) - 不传
type或设为'default'→ 单选(无控件,仅高亮)
必须引入 formSelects-v4.js,且顺序不能错
formSelects is not defined 这类报错,90% 是因为没加载插件 JS 文件,或加载顺序不对。Layui 自身的 layui.js 不含 formSelects,必须额外引入。
正确顺序:
- 先加载
jquery-3.3.1.min.js(formSelects依赖 jQuery) - 再加载
layui.js - 最后加载
formSelects-v4.js - CSS 文件(
formSelects-v4.css)建议放在中
如果用 layui.use,记得在模块数组里显式声明:['form', 'formSelects'],否则 formSelects 不会注入全局作用域。
取值和赋值必须用 formSelects.value(),别碰原生 DOM
渲染后真实的 <select></select> 元素被隐藏了,DOM 操作完全失效。用 $('select[name="xxx"]').val() 或 document.querySelector('select').value 都会返回 undefined 或第一个值,纯属误导。
- 获取多选值:
formSelects.value('mySelect')→ 返回['java', 'python'](字符串数组) - 设置多选值:
formSelects.value('mySelect', ['go'])→ 自动勾选并刷新 UI - 清空所有选项:
formSelects.value('mySelect', []),比点右上角 × 更可靠,适合表单重置逻辑
注意:后端若需要 JSON 数组,得手动 JSON.stringify(roles);若要逗号字符串,自己 .join(','),插件不自动转换。
表格中动态生成的下拉框需在 done 和 page.jump 里重复初始化
Layui table 的单元格是 JS 动态插入的,首次 render 后 DOM 才存在。如果只在页面加载时调用一次 formSelects.render(),翻页、重载、编辑行时新生成的 select 就没被接管——表现为点击无反应、选中不回显、取不到值。
解决方式是封装初始化函数,并在两个地方调用:
-
table.render().done:确保首屏渲染完成后再绑定 -
page: { jump: initFormSelectsInTable }:翻页时重新绑定
每次调用前无需销毁旧实例,formSelects.render() 会自动覆盖同名 ID/Filter 的已有实例。但要注意每个下拉框的 name 或 xm-select 值必须唯一,否则相互干扰。











