layui原生select不支持多选,必须使用第三方组件formSelects-v4;需引入JS/CSS,调用formSelects.render()初始化,设置type:'checkbox'和btnClear:true启用多选与清空按钮。
layui select 多选功能本身不支持,得换组件
原生 layui.select 不提供多选能力,官方文档和源码里都明确只支持单选。强行用 multiple 属性或 js 模拟勾选,会导致下拉面板关闭异常、值无法同步、回显错乱等问题。
真正可用的路径只有一条:改用 layui.formSelects —— 这是社区广泛采用的第三方扩展组件,与 layui 2.x 兼容良好,API 设计也贴近原生风格。
- 必须引入
formSelects-v4.js(注意不是 v5,v5 已转向 Vue/React,不兼容 layui) - 对应 CSS 也要加载,否则下拉框样式错位或无图标
- 初始化时不能用
form.render('select'),而要调用formSelects.render()
formSelects 渲染多选并启用清空按钮
清空按钮(×)是 formSelects 的内置功能,但默认不显示,需显式开启 searchClear 或 btnClear 参数。
推荐写法:
formSelects.render('mySelect', {
type: 'checkbox',
search: true,
btnClear: true, // 关键:显示右上角清空按钮
searchPlaceholder: '搜索选项...',
data: [
{name: 'Java', value: 'java'},
{name: 'Python', value: 'python'},
{name: 'Go', value: 'go'}
]
});
-
type: 'checkbox'是多选前提,'radio'或省略则为单选 -
btnClear: true控制右上角 × 按钮;searchClear: true则控制搜索框内的清空 X(二者可共存) - 若后端返回的是字符串数组如
["java","python"],直接传给value即可,无需手动拼接
获取/设置多选值要注意数据格式
formSelects.value() 返回的是数组,不是逗号字符串,这点和原生 select 的 value 行为完全不同。
- 取值:
formSelects.value('mySelect')→ 返回['java', 'python'] - 赋值:
formSelects.value('mySelect', ['go'])→ 会自动勾选对应项并刷新 UI - 清空:
formSelects.value('mySelect', []),比点 × 按钮更可控,适合表单重置逻辑 - 若用
$('select[name="mySelect"]').val()取值,得到的是undefined或第一个值 —— 因为真实<select>被隐藏了,操作 DOM 无效
常见报错:formSelects is not defined 或下拉空白
这类问题基本锁定在加载顺序和依赖缺失上:
- 没引入
formSelects-v4.js,只用了 layui 自带的layui.js→ 报formSelects is not defined - CSS 没加载或路径错误 → 下拉框显示为纯文字列表,无复选框、无滚动条、无搜索框
-
render时传入的id或name和 HTML 中不一致 → 渲染失败且静默,控制台无报错 - 在
layui.use(['form'], ...)回调外调用formSelects.render→ 依赖未就绪,可能报错或无效
复杂点在于:formSelects 的数据远程加载、树形级联、权限过滤等高级用法,都需要额外配置 url 和 formatItem,但基础多选+清空,上面几步已足够。别在没验证基础渲染成功前,急着加异步逻辑。


















