label属性必须非空且非纯空白，optgroup必须为select直接子元素，disabled仅禁用选项不隐藏标题，ios原生select不显示分组标题。
label属性不写或为空，分组就完全失效
浏览器只靠label属性渲染分组标题，没它就等于没写optgroup。常见静默失败场景包括：<optgroup><option>苹果</option></optgroup>（漏写label）、<optgroup label=""></optgroup>（空字符串）、<optgroup label=" "></optgroup>（纯空格）。这些情况下，option仍会显示，但标题消失、语义丢失、屏幕阅读器也读不到归属关系。
动态生成时尤其容易踩坑：服务端模板未判空、JS 中忘记赋值 optgroup.label = group.name、或没做 .trim() 导致首尾空格混入。实操建议：
- 服务端输出前校验
label长度，JS 插入前先if (!group.label?.trim()) return - 中文 label 控制在 2–4 字，避免“其他分类”“Group 1”这类模糊表述
- 国际化项目中，
label必须由 JS 动态注入或服务端模板变量生成，硬编码中文会卡死本地化流程
optgroup必须是select的直接子元素，嵌套错位置就静默忽略
optgroup 不是独立控件，它只能作为 select 的**直接子元素**，且内部只允许 option。塞进 div、放在 select 外、或里面夹了注释/文本节点（尤其旧版 Safari 对空白敏感），浏览器都会跳过整段解析——你检查 DOM 时可能根本看不到它。
典型错误写法：
<div><optgroup label="水果"><option>苹果</option></optgroup></div><form><optgroup label="蔬菜"></optgroup></form>-
<select><optgroup><optgroup label="水果"></optgroup></optgroup></select>（嵌套optgroup）
合法结构唯一：<select><optgroup label="水果"><option>苹果</option></optgroup></select>。模板引擎里写条件块时，注意别让 <optgroup></optgroup> 前后结构断裂，比如 {% if showGroup %}<optgroup label="水果"></optgroup>{% endif %} 若 showGroup 为 false，可能导致 select 内部只剩孤立 option 或闭合错位。
disabled加在optgroup上，选项禁用但label仍可见
给 optgroup 加 disabled，会让它内部所有 option 灰显且不可交互，但 label 文字依然清晰可见——这不是 bug，是规范行为。很多人误以为“标题还在 = 没生效”，其实恰恰相反。
反直觉的是：optgroup disabled 对子 option 的 disabled 状态**无继承关系**。如果父 optgroup 已禁用，再单独给某个 option 设 disabled=false，浏览器仍会阻止选择。
兼容性陷阱：
-
<optgroup disabled></optgroup>在 Chrome/Firefox/Edge 中有效，但 Safari 16 及更早版本完全忽略该属性，组内option依然可点 - 若业务要求全平台一致禁用，必须手动给每个
option加disabled，再配合 CSS 隐藏或弱化label视觉表现 - 键盘操作下，部分浏览器仍允许方向键高亮到该组内
option（只是无法回车选中），所以表单提交前仍需服务端校验值是否合法
iOS原生select根本不显示optgroup label
iOS 原生 <select></select> 弹出层（即系统 Picker）**根本不显示 optgroup label**——所有选项扁平排列，分组信息彻底丢失。用户无法分辨“苹果”属于“水果”还是“品牌”。这不是 bug，是 Safari 的明确设计限制。
如果产品必须在 iOS 上保留分组语义，只有两个务实选择：
- 放弃原生
select，改用 JS 实现的下拉组件（如Choices.js、tom-select），它们能模拟分组并兼容 iOS - 退而求其次，在 label 文本中用前缀体现层级，比如
<option value="shanghai">● 上海</option>或<option value="new">[待上线] 新功能</option>
原生 optgroup 的样式能力极弱，optgroup { font-weight: bold; color: #555; margin-top: 0.5em; } 在 Chrome/Firefox 有效，但 Safari 某些版本会忽略 font-weight；想加图标、悬停、折叠展开等交互，说明已超出 optgroup 能力边界，该换 JS 模拟下拉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
