<optgroup>仅支持扁平化视觉分组，不可嵌套、不可禁用、不响应DOM变更，适用于同级分类；多级联动需JS动态控制或第三方组件。
直接说结论：用 <optgroup> 能让 <select> 的选项视觉分组、语义清晰，但不能嵌套、不能禁用、不能绑定数据——它只是纯展示分组，别指望它替代 JS 树形控件。
为什么 <optgroup> 不能解决所有分级需求
很多人以为加了 <optgroup> 就能实现“二级菜单”或“可展开分类”，其实它只渲染为带灰色标题的不可选分隔块。浏览器根本不支持子级 <option> 再套分组，也不允许在 <optgroup> 里放 <optgroup> —— HTML 规范明确禁止嵌套。
-
<optgroup label="前端"><optgroup label="框架"></optgroup></optgroup>是非法 HTML，多数浏览器会直接忽略内层<optgroup> -
<optgroup disabled>不起作用：禁用整个分组？不行。只能对单个<option>加disabled - 屏幕阅读器会把
label读作“组：React”，但不会播报该组包含几个选项——无障碍支持有限
正确写法：扁平化分组 + 合理命名 label
适用场景是「同级分类」，比如按地域、类型、状态等维度把选项归堆。关键在 label 值要简短、无歧义，且所有 <option> 必须直属于 <select> 或某个 <optgroup>。
<select name="framework">
<optgroup label="JavaScript">
<option value="react">React</option>
<option value="vue">Vue</option>
</optgroup>
<optgroup label="TypeScript">
<option value="angular">Angular</option>
<option value="svelte">Svelte</option>
</optgroup>
</select>
- 每个
<optgroup>必须有label属性，否则不渲染分组标题 -
label值不要含冒号、括号等易被误解析的符号（如label="后端 (Node.js)"在部分旧 Android 浏览器里会截断） - 不要试图用 CSS 给
<optgroup>加背景色或 padding：部分浏览器（如 Safari）不支持样式化<optgroup>
当真需要多级联动时，<optgroup> 就该让位
比如“选择省份 → 动态加载城市 → 再选区县”，这种依赖状态变化的流程，硬塞进单个 <select> 里只会导致选项爆炸、可维护性崩坏。这时候该用两个独立 <select> + JS 监听，或者直接上 <datalist> / 第三方组件（如 Select2、Choices.js）。
立即学习“前端免费学习笔记（深入）”；
- 用原生方案的话，第一级选完触发
fetch拉第二级数据，再innerHTML或appendChild动态生成<option>—— 别往<optgroup>里塞动态内容，它不响应 DOM 变更 - 如果后台返回的是树形结构（如
{province: [{city: [...]}]}），别尝试 flatten 成带前缀的 option 文本（如<option>广东省-深圳市</option>），那会破坏语义和搜索体验 - 移动端尤其注意：
<optgroup>在 iOS 上滚动时可能卡顿，选项超 50 条就建议拆成搜索型控件
真正容易被忽略的点是：分组不是功能增强，而是信息降噪。它不改变表单提交逻辑，value 还是取自 <option>，<optgroup> 自身永远不参与提交。别为了“看起来有层级”而滥用，先确认用户是否真的需要视觉分组，而不是交互式折叠。
