optgroup 不支持多层嵌套，因 html 规范强制其必须为 select 的直接子元素；浏览器会静默丢弃嵌套的 optgroup，导致分组逻辑丢失；真需多级结构应改用联动 select、datalist 或 js 组件。
optgroup 不支持多层嵌套，所谓“多层下拉菜单”用它无法实现语义化区分——这不是写法问题，是 HTML 规范本身禁止。
为什么 optgroup 不能做多级分类
浏览器解析器遇到嵌套的 optgroup（比如 <optgroup><optgroup></optgroup></optgroup>）会直接丢弃内层标签，不报错、不渲染、也不警告。你看到的只是扁平选项，分组逻辑彻底丢失。
-
optgroup必须是select的**直接子元素**，不能是另一个optgroup或div的子元素 - label 属性只用于单层标题，没有层级语义能力
- 无障碍 API（如 ARIA）也无法通过
optgroup暴露“子组”关系
真需要多级时，该用什么替代方案
当业务要求“省份 → 城市 → 区县”或“分类 → 子类 → 具体项”这类结构，optgroup 就该让位：
- 用两个或多个独立
select+change事件联动：第一级选完再请求第二级数据，动态生成option，不往optgroup里塞逻辑 - 改用
datlist配合输入框，支持模糊搜索，避免长列表滚动 - 引入轻量 JS 组件（如 Choices.js），它用真实 DOM 树模拟层级，同时保持表单值可提交
- 服务端返回扁平数据时，别用文本前缀模拟层级（如
<option>广东-深圳-南山区</option>），这破坏键盘导航和屏幕阅读器识别
如果坚持用原生 select，怎么“看起来像”多级
只能靠单层 optgroup + 视觉暗示，但必须接受语义缺失：
- 用 Unicode 缩进符号（如
├─）开头写option文本，例如：<option value="sz"> 深圳市</option> - 配合 CSS 控制
text-indent或padding-left，但 Safari 对optgroup的样式支持极弱，padding常被忽略 - 确保关键信息（如城市名）始终在文本最前面，否则 Safari 键盘搜索会匹配不到
- 放弃 label 中文括号、冒号等符号——旧 Android 浏览器可能截断，例如
label="华东 (含上海)"可能只显示“华东”
移动端特别注意：iOS Safari 根本不显示 optgroup label
iOS 系统 Picker 弹窗里，所有 optgroup 标题都会消失，只剩扁平 option 列表。如果你的用户大量使用 iPhone，仅靠 optgroup 做区分等于没做。
这时候要么加 JS 模拟下拉（如用 div + aria-expanded），要么接受现实：在移动端换成交互更明确的筛选控件（如卡片式分类 + 多选按钮）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
