layui select 通过 JS 初始化 data 数组并设置 group 字段实现分组，要求 group 值为唯一字符串、同组项连续排列，且仅分组项含 group、选项项含 value 和 title；2.8+ 支持 form.select() 方法，旧版需伪分组模拟。
layui select 怎么用 optgroup 实现分组
layui 的 select 组件原生不支持 <optgroup></optgroup> 标签渲染，直接写在 html 里会被忽略。必须通过 js 初始化时传入结构化数据，由 layui 自动转换为带分组的下拉菜单。
核心是：不能靠 HTML 模板写 <optgroup></optgroup>，得用 data 数组 + group 字段（或自定义字段）驱动渲染。
- layui 2.8+ 支持
group字段标识分组项，同组项需连续排列 - 每个选项对象必须含
value和title（或name），分组项本身只设group字段，不设value - 分组标题文字由
group字段值决定，且该字段值需唯一（重复会导致渲染错乱）
初始化时传入带 group 的 data 数组
这是最稳妥的做法，绕过 HTML 解析限制，让 layui 在 JS 层完成分组逻辑。
layui.use(['form'], function(){
var form = layui.form;
// 注意：group 字段值必须是字符串，且同组项必须连续
var selectData = [
{group: '前端框架'},
{value: 'vue', title: 'Vue.js'},
{value: 'react', title: 'React'},
{group: '后端语言'},
{value: 'node', title: 'Node.js'},
{value: 'python', title: 'Python'}
];
// 渲染时指定 elem 和 data
form.render('select', 'demo-filter'); // 先清空原有 select
form.select({
elem: '#mySelect',
data: selectData,
width: 200
});
});
注意：form.select() 是 layui 2.8 新增方法，旧版本（如 2.7）不支持，强行调用会报 form.select is not a function 错误。
旧版 layui（2.7 及以下）如何模拟 optgroup
没有 form.select() 就只能手动拼 HTML + 触发重新渲染，但要注意：layui 会过滤掉原生 <optgroup></optgroup>，所以得用「伪分组」方式——插入带样式的占位项，并禁用其选择。
- 在原始
<select></select>中添加<option disabled>【前端框架】</option>这类禁用项 - 给这类 option 加 class（如
layui-select-group），再用 CSS 设置color: #999; font-weight: bold; - 调用
form.render('select')后，layui 生成的 layselect 面板中仍保留这些 option，但需额外 JS 禁用点击（因为 layui 不识别disabled属性） - 监听
select的change事件，遇到 value 为空或匹配分组文本时，手动还原上一个有效值
常见错误和兼容性坑
分组失效、点击无反应、控制台报错，多数出在这几处：
- data 数组里
group值不是字符串（比如写了group: 1），layui 内部判断失败，直接跳过分组逻辑 - 同组项不连续（中间插了其他 group 或普通项），导致分组断裂，部分选项被归入错误分组
- 混用 HTML 写法和 JS 初始化：先在 HTML 里写了
<optgroup></optgroup>，又调form.render()，结果被清空重绘，<optgroup></optgroup>彻底丢失 - layui 版本低于 2.8 却照抄新版文档代码，
form.select()未定义，页面 JS 报错阻断后续执行
真正要稳定实现分组，优先升级到 layui 2.8+，并严格按 group 字段规则组织 data。低版本就接受「伪分组」的视觉妥协，别强求原生语义。
