optgroup必须嵌套在select内且label非空，否则浏览器忽略整组；仅支持单层结构，disabled在Safari中无效，iOS原生select不显示label。
optgroup 不是“美化插件”，它是原生、语义正确且无障碍友好的唯一分组方式。但写错一行，整组就静默失效——不是没效果，而是浏览器直接忽略。
label 属性缺失或为空导致分组不显示
这是最常踩的坑：没有 label，optgroup 就等于不存在。浏览器不会报错，也不会渲染标题，内部 option 仍照常显示，但用户完全感知不到分组逻辑。
-
label是必需属性，不能省略；写成<optgroup>或<optgroup label="">都无效 -
label=" "（纯空格）在 Chrome/Firefox 中等同于无label；Safari 可能渲染空白行，造成视觉错位 -
label值不解析 HTML，写成label="<strong>水果</strong>"会原样显示字符串，不会加粗 - 服务端模板中若用条件包裹（如
{% if group %}<optgroup>...</optgroup>{% endif %}），需确保label字符串非空且已求值
嵌套结构错误让整个分组被浏览器忽略
optgroup 只允许一层扁平结构，必须直接作为 select 的子元素。任何嵌套都会被 UA 解析器丢弃或拍平，轻则分组消失，重则选项顺序错乱。
- 错误：
<optgroup label="前端"><optgroup label="框架"><option>Vue</option></optgroup></optgroup>→ 内层optgroup被忽略 - 错误：
<select><div><optgroup label="华东">...</optgroup></div></select>→ 整个optgroup被跳过 - 正确顺序只能是：
select→optgroup或option（同级）→option - 动态插入时，不能用
appendChild()往select添加optgroup；必须调用select.add(optgroup)，且插入前必须显式赋值optgroup.label = "华东地区"
disabled 属性行为不一致，尤其在 Safari 中失效
optgroup disabled 在 Chrome/Firefox/Edge 中能禁用整组 option，但在 Safari 16 及更早版本中完全被忽略——组内 option 依然可点、可键盘聚焦、可提交。这不是 bug，是规范未强制要求的行为。
立即学习“前端免费学习笔记（深入）”；
- 想全平台一致禁用？必须手动给每个
option加disabled属性，并配合 CSS 隐藏或弱化optgroup的视觉表现 -
optgroup disabled不阻止键盘上下键切换到该组内的option（部分浏览器仍允许高亮），表单提交前仍需服务端校验值是否合法 -
optgroup本身没有value，设了也无效；select.value和FormData.get()只取option的value - 禁用某个具体选项，直接加
disabled到对应option即可，无需动optgroup
iOS Safari 根本不显示 optgroup label，移动端必须另做处理
iOS 原生 select 弹出层（系统 Picker）不渲染 optgroup label —— 所有选项扁平排列，分组信息彻底丢失。这不是兼容性问题，是 Apple 明确的设计限制。
- 如果产品必须在 iOS 上保留分组语义，务实方案只有两个：放弃原生
select，改用 JS 实现的下拉组件（如tom-select、Choices.js）；或用option模拟分组标题（如<option disabled value="">▶ 华东城市</option>） - 即使 iOS 不朗读
label，也要保留它——VoiceOver 在某些设置下仍会播报 “group start”，配合option文本能提升上下文理解 - CSS 强制样式（如
optgroup { font-weight: bold; color: #4a5568; }）对 iOS Safari 无效，不要浪费时间调试 - 当选项总数超 20+，单靠
optgroup已不够；必须叠加搜索过滤、模态弹层或分步加载等更高阶方案
真正难的不是怎么写 optgroup，而是判断什么时候不该用它——比如需要二级分类、要支持搜索、或必须在 iOS 上显示分组标题时，optgroup 就只是个语义起点，后面全得靠 JS 补位。
