不支持多级嵌套，因html规范限定其只能作为的直属子元素且仅允许包含，内层会被解析器丢弃而非隐藏；模拟层级需靠文本前缀或unicode缩进，超50项或需交互功能时应改用js插件。
<optgroup></optgroup> 不支持多级嵌套，浏览器会直接忽略内层 <optgroup></optgroup> 标签，不会渲染二级标题，也不报错。
为什么写嵌套的 optgroup 无效
HTML 规范明确要求 <optgroup></optgroup> 只能作为 <select></select> 的直属子元素，且内部只允许 <option></option>。写成 <optgroup><optgroup></optgroup></optgroup> 时，第二个 <optgroup></optgroup> 被视为非法子节点，被解析器丢弃——不是“不显示”，而是压根没进 DOM 树。
常见错误现象包括：
- 开发者以为分组生效了，实际用户看不到二级标题
- 用 DevTools 查看元素，发现内层
<optgroup></optgroup>根本不存在 - 屏幕阅读器跳过整个“伪二级分组”，无障碍体验断裂
怎么模拟“多级”效果（仅限单层 optgroup）
真要表达层级关系，只能靠视觉和文本暗示，且必须保证关键信息在 <option></option> 文本开头，否则 Safari 键盘首字母跳转会失效。
可行做法：
- 用 Unicode 缩进符号：如
<option> ● 上海</option>（注意用全角空格或 - 加前缀标识：如
<option>[华东] 上海</option>，确保“上海”仍可被键盘定位 - 分组 label 保持简短：
<optgroup label="华东"></optgroup>，而非<optgroup label="地理分区-华东地区"></optgroup> - 避免在
<optgroup></optgroup>里混用不同层级逻辑，比如把“省份”和“城市”塞同一组
什么时候该放弃 optgroup 改用 JS 插件
当出现以下任一情况，<optgroup></optgroup> 就不再是合适选择：
- 选项总数超过 50 条，用户需要搜索而非滚动浏览
- 真实存在父子关系（如“云服务 → ECS → 按量付费”），且需展开/折叠
- 需要支持禁用整组、复选、图标、异步加载等交互
- 必须兼容旧版 Safari（它对
<optgroup></optgroup>内空白字符敏感，易导致分组消失）
这时候应切换到 Choices.js 或 TomSelect 这类轻量插件——它们用真实 DOM 树实现层级，但代价是增加 JS 依赖和初始加载时间。
真正容易被忽略的是：分组 label 的文字是否匹配用户心智模型。比如把“已下线产品”和“测试中功能”并列放在同一 <optgroup label="待观察"></optgroup> 下，语义就崩了——这不是技术限制问题，而是分类逻辑本身没想清楚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
