optgroup 必须作为 select 的直接子元素且 label 属性非空，否则浏览器静默忽略整组；动态添加需用 select.add() 而非 appendchild()；ios safari 不渲染 label，需在 option 中显式标注分组信息。
optgroup 不是独立控件，它只是 select 的语义分组容器——写错结构或漏掉关键属性，浏览器就直接忽略整组，而不是“效果不好”。
label 属性缺失或为空导致分组静默失效
这是最常踩的坑：没写 label，或写成 <optgroup></optgroup>、<optgroup label=""></optgroup>、<optgroup label=" "></optgroup>，浏览器不会报错，但分组标题不渲染、键盘跳转不识别、屏幕阅读器不播报归属关系。
-
label是必需属性，不能省略；服务端模板中用条件包裹时（如{% if group %}<optgroup label="{{ group.name }}"></optgroup>{% endif %}），必须确保group.name经过.trim()且非空 - 中文
label控制在 2–4 字，如label="华东"，避免模糊表述如label="其他未分类项" -
label值不解析 HTML，写成label="<strong>水果</strong>"会原样显示字符串
optgroup 必须是 select 的直接子元素
optgroup 只能作为 select 的一级子节点存在。任何中间层级（div、form、另一个 optgroup）都会让整个分组被浏览器解析器丢弃。
- 错误：
<select><div><optgroup label="水果"><option>苹果</option></optgroup></div></select>→ 整个optgroup被跳过 - 错误：
<optgroup label="前端"><optgroup label="框架"><option>Vue</option></optgroup></optgroup>→ 内层被忽略，外层若无label也失效 - 正确结构唯一：
<select><optgroup label="水果"><option value="apple">苹果</option></optgroup> <option value="carrot">胡萝卜</option></select>
动态插入 optgroup 时不能用 appendChild()
JavaScript 动态添加时，不能用 appendChild() 往 select 插入 optgroup，否则即使 DOM 中可见，浏览器也不识别其分组语义。
- 必须调用
select.add(optgroup)，且optgroup.label = "华东地区"必须在插入前赋值 - 如果先
appendChild()再赋值label，多数浏览器仍视其为无效分组 - 插入后检查
select.children是否包含该optgroup节点，但注意select.options里永远只返回option元素，不包含optgroup
iOS Safari 不显示 optgroup label，移动端需另做处理
iOS 原生 select 弹出层（系统 Picker）根本不会渲染 optgroup 的 label 文本——所有 option 扁平排列，分组信息彻底丢失。这不是 bug，是 Safari 明确的设计限制。
- CSS 强制显示（如
optgroup { font-weight: bold; }）或伪元素（::before）在 iOS 上完全无效 - 务实方案：在每个
option文本开头显式带上关键分组信息，如<option value="shanghai">【华东】上海</option> - 超 50 项的长列表，应放弃纯原生
select，改用带搜索过滤的 JS 组件（如 Choices.js），而非硬靠optgroup降维
真正容易被忽略的是：分组失效时你看到的往往不是“空白”，而是“选项还在，只是没标题”——这种静默失败会让问题藏得更深，尤其在服务端模板批量生成或 JS 动态注入场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
