不支持嵌套是 html 规范强制限制，只能作为 的直接子元素且仅能包含 ；嵌套会被浏览器静默丢弃，破坏语义与无障碍支持，需用扁平化、联动控件或第三方库实现多级逻辑。
<optgroup></optgroup> 不支持嵌套，这是 HTML 规范强制要求的硬性限制，不是浏览器兼容问题，也不是未来可能放开的特性。
为什么 <optgroup></optgroup> 不能嵌套？
HTML 标准（包括 HTML5）明确规定：<optgroup></optgroup> 只能作为 <select></select> 的直接子元素，且其子元素只能是 <option></option>。任何嵌套结构都会被浏览器解析器自动丢弃或“拍平”——比如 <optgroup label="华东"><optgroup label="上海"><option>浦东</option></optgroup></optgroup>，第二个 <optgroup></optgroup> 根本不会出现在 DOM 中。
- 浏览器会忽略非法嵌套，不报错、不警告，只静默丢弃，导致你预期的分组消失、文字乱序甚至整个下拉变空
- 哪怕用了现代框架（React/Vue）动态生成，只要最终输出的 HTML 违反该规则，结果一样无效
- 无障碍支持（如屏幕阅读器）依赖标准结构，嵌套会破坏分组语义播报，用户听到的只剩孤立的
<option></option>文本
<optgroup></optgroup> 的合法层级结构长什么样？
合法结构只有且必须是： <select></select> → 多个并列的 <optgroup></optgroup> → 每个 <optgroup></optgroup> 内若干 <option></option>。没有“父-子组”、没有“二级分组”概念。
- ✅ 正确：
<select><optgroup label="水果"><option>苹果</option></optgroup> <optgroup label="蔬菜"><option>番茄</option></optgroup></select> - ❌ 错误：
<optgroup></optgroup>放在另一个<optgroup></optgroup>里、放在<option></option>后面、中间夹了注释或空格文本节点 - ⚠️ 注意：
<select disabled></select>会让所有<optgroup></optgroup>和<option></option>都不可用，你无法通过 CSS 或 JS 单独启用某个<optgroup></optgroup>下的选项
想实现“省→市→区”三级逻辑怎么办？
必须放弃原生 <optgroup></optgroup> 嵌套幻想，改用扁平化 + 工具链方案：
- 前缀法：把“上海-浦东”“上海-徐汇”“北京-朝阳”作为
<option></option>的 value/text，靠字符串解析还原层级，适合数据量小、无交互需求的场景 - 双控件联动：一个
<select></select>选省，JS 动态填充第二个选市，再填第三个选区；语义清晰、无障碍友好、原生可用 - 第三方库渲染：用
Choices.js、Select2或react-select，它们用 div+ul 模拟下拉，完全绕过 HTML 表单限制，支持真正的多级树形结构和搜索 - 别碰 CSS 缩进模拟嵌套：浏览器对
<optgroup></optgroup>的样式控制极弱（比如margin-left大部分无效），且无法绑定事件或键盘导航，纯视觉欺骗，维护成本高还容易崩
最常被忽略的一点：即便你写对了结构，如果父 <select></select> 被设了 disabled，整组就彻底锁死——这不是 bug，是规范设计使然。需要“部分禁用”时，只能逐个给 <option disabled></option>，而不是指望 <optgroup disabled></optgroup>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
