layui原生select不支持多选,需用第三方插件layui-selects;它轻量、无jQuery依赖、兼容layui风格,支持搜索、多选、toolbar及自定义数据解析。
layui 下拉框原生不支持多选,必须换组件
layui 的 select 是纯原生 <select> 封装,连搜索都不带,更别说多选。强行用 multiple 属性 + lay-filter 是无效的——form.render() 不识别,form.on('select(...)') 也只触发一次、拿不到多个值。
推荐用 layui-selects(轻量、无 jQuery 依赖)
这是目前和 layui 风格最兼容的第三方下拉多选插件,直接基于 layui 的模块机制加载,不用改全局 CSS,也不破坏原有表单校验逻辑。
- 下载
layui-selects.js和layui-selects.css,放到项目static/layui/同级目录 - 在页面中用
layui.use(['selects'], ...)加载,不是use(['form', 'selects'])—— 它内部已自动适配 form 模块 - HTML 中把原
<select>改成带lay-key的写法:<select name="tags" lay-key="tags-select"> - 初始化时传参要明确指定
search: true,否则下拉里没搜索框;multiple: true必须显式写,不能靠属性推断
layui.use('selects', function(){
var selects = layui.selects;
selects.render({
elem: '#tagSelect',
data: [{value: '1', title: '前端'}, {value: '2', title: '后端'}],
search: true,
multiple: true,
toolbar: true // 显示全选/清空按钮(可选)
});
});
注意 value 类型和 form 提交时的格式
layui-selects 默认把多选值拼成逗号分隔字符串(如 "1,2,5"),但后端通常要数组。别在提交前手动 split(',') —— 它提供了 parseData 钩子:
- 若后端接口接收 JSON 数组,用
parseData: function(res){ return JSON.stringify(res); } - 若表单是传统
application/x-www-form-urlencoded,且后端用tags[]=1&tags[]=2接收,得重写submit逻辑,把selects.getValue('tags-select')结果转为多个同名 input 动态插入表单 - 千万别用
name="tags[]"写在 select 上——layui-selects 会忽略它,还是按字符串提交
和 layui 表单验证联动容易失效
原生 form.verify 对 select 只校验是否存在值,对多选组件完全不感知。必须手动绑定:
- 监听
selects.on('change(...)', callback),在回调里调用form.validate('your-form-filter') - 自定义验证规则时,用
selects.getValue('xxx')取值,而不是$('select[name=xxx]').val()—— 后者永远是空或第一个值 - 如果用了
toolbar: true,用户点「清空」后,getValue返回空数组[],验证规则里要判断arr.length === 0,而不是!arr


















