layui下拉框可通过html原生标签实现分组，需在layui.use(['form'],...)后调用form.render('select')才能生效；label显示为灰色不可选标题，动态插入须重新render，注意版本不低于2.5.7及移动端兼容性。
layui 下拉框如何用 optgroup 实现分组
layui 的 select 组件本身不提供原生分组 API，但支持标准 HTML 的 <optgroup></optgroup> 标签。只要你在 select 内部手动写好结构，layui 初始化后会自动渲染成带分组的下拉菜单。
关键点：必须在 layui.use(['form'], ...) 之后调用 form.render('select')，否则分组不会生效。
- HTML 中直接写
<optgroup label="分组名"></optgroup>，里面放<option></option> - label 值会被显示为灰色分组标题，不可选
- layui 不校验
optgroup合法性，但浏览器会丢弃非法嵌套（比如optgroup套optgroup） - 动态插入时，需重新调用
form.render('select')，否则新分组不显示
分组下拉框的完整 HTML 结构示例
下面这段代码能直接跑通，注意 lay-filter 和 form.render() 的配合：
<select id="mySelect" lay-filter="mySelect"><optgroup label="前端框架"> <option value="layui">Layui</option> <option value="element">Element UI</option> </optgroup> <optgroup label="后端语言"> <option value="php">PHP</option> <option value="node">Node.js</option> </optgroup></select>
然后在 JS 中初始化：
layui.use(['form'], function(){
var form = layui.form;
// 必须调用 render，否则 optgroup 不生效
form.render('select');
form.on('select(mySelect)', function(data){
console.log(data.value); // 输出选中的 value
});
});
动态生成分组时容易漏掉的步骤
如果用 JS 拼接字符串或通过 AJAX 加载选项再插入 select，常见错误是只改了 innerHTML 却忘了重渲染。
- 不要只写
document.getElementById('mySelect').innerHTML = htmlStr - 必须紧接着执行
form.render('select', 'mySelect')（第二个参数是容器选择器，可选） - 如果用了 lay-filter，确保新 HTML 中的
value和label符合业务逻辑，layui 不校验值是否重复 - 移动端 Safari 对
optgroup支持较弱，测试时务必真机验证
分组失效的三个典型原因
遇到分组没显示、变成普通选项、或者报错，先检查这三项：
-
form.render('select')没执行，或执行时机早于 DOM 插入（比如放在 DOMContentLoaded 之前） -
optgroup标签写在了select外面，或被其他 JS 框架/模板引擎意外转义（比如 Vue 的 v-html 会过滤optgroup） - layui 版本低于 2.5.7 —— 早期版本对
optgroup渲染有 bug，升级到最新稳定版即可
分组本身没有额外样式控制权，label 文字颜色和缩进由 layui 默认 CSS 决定，如需定制，得覆盖 .layui-form-select dl dd .layui-select-group 类，但要注意别影响其他 select。
