layui原生select不支持多选，需用laySelect扩展库实现；其通过模拟复选框下拉面板提供多选功能，支持搜索、全选等，初始化需在layui.js后引入，HTML加multiple属性，监听用change事件返回数组。
layui 的 select 原生不支持多选，得换方案
layui 官方的 select 组件（即 lay-select）只支持单选，没有 multiple 属性，强行加也不会生效。你看到的“多选下拉框”效果，实际是用 checkbox + dropdown 模拟出来的，或者用第三方插件（如 laySelect 扩展库），但后者非 layui 官方维护，兼容性和更新没保障。
推荐用 laySelect 扩展库实现多选（轻量、无依赖）
社区广泛使用的 laySelect 是基于 layui 的二次封装，专为多选优化，API 风格和原生一致，容易上手。它本质是把 select 标签渲染成带复选框的下拉面板，支持搜索、全选、禁用项等。
- 下载地址：GitHub 搜索
laySelect（作者：zhousg），取v2.0+版本（适配 layui 2.8+） - 引入顺序必须在
layui.js之后：<script src="layui/layui.js"></script><br><script src="laySelect/laySelect.js"></script>
- HTML 写法保持原样，但需加
multiple属性：<select id="multiSelect" multiple lay-filter="multiDemo"><br> <option value="1">选项一</option><br> <option value="2">选项二</option><br></select>
- 初始化时调用：
laySelect.render({<br> elem: '#multiSelect',<br> search: true,<br> placeholder: '请选择多个...',<br> max: 3 // 可选上限（可选）<br>});
监听选中值变化要用 change 而不是 select
原生 layui 的 form.on('select(filter)', callback) 只响应单选变更；laySelect 改用 change 事件，且返回的是数组而非字符串：
form.on('change(multiDemo)', function(data){<br> console.log(data.value); // ['1', '2']，注意是字符串数组<br> console.log(data.elem); // 原始 select DOM 元素<br>});
- 别再用
data.value直接当字符串拼接，要先join(',')或遍历处理 - 如果表单提交前需同步到 hidden input，记得手动更新：
$('#hiddenMulti').val(data.value.join(',')) - 服务端接收时，注意后端解析逻辑是否适配数组格式（比如 PHP 的
$_POST['xxx'][]）
移动端点击区域小、复选框错位？检查 CSS 和渲染时机
常见问题不是代码写错，而是样式冲突或 DOM 尚未就绪就调用了 laySelect.render()：
- 确保
select标签已存在于 DOM 中（不要在ajax回调里动态插入后再渲染，除非显式调用laySelect.reload()） - 移动端点击无响应，大概率是
.layui-form-checkbox的padding或height被重置，加一行修复：.layui-form-checkbox { height: auto !important; } - 下拉面板遮挡内容？检查父容器是否有
overflow: hidden，或给laySelect配置trigger: 'click'避免 hover 触发异常
多选下拉的本质是交互模拟，不是原生控件，所以所有“看起来像下拉框”的行为，背后都是 JS 动态生成 DOM + 事件代理——这点决定了它的灵活性，也决定了它比原生更依赖上下文环境。别指望一次配置通吃所有场景，特别是嵌套在弹窗、Tab 页或 iframe 里的时候，得手动触发 laySelect.refresh() 或重载实例。
