必须是的直接子元素且label非空，否则分组静默失效；嵌套错误、动态插入未用add()方法、ios safari不支持分组显示，需降级处理。
<optgroup></optgroup> 必须是 <select></select> 的直接子元素，漏写 label 或嵌套错位置，整组就静默消失——不是“没效果”，而是浏览器根本不解析它。
label 属性缺失或为空导致分组完全不可见
这是最常踩的坑：<optgroup></optgroup> 没有 label，等于没写。浏览器不会报错，<option></option> 仍照常显示，但分组语义丢失、屏幕阅读器不播报、键盘导航也不跳过分组间隙。
-
<optgroup><option>苹果</option></optgroup>→ 标题不渲染，用户感知不到“水果”分组 -
<optgroup label=""></optgroup>或<optgroup label=" "></optgroup>→ Chrome/Firefox 当无label处理；Safari 可能渲染空白行，造成视觉错位 - 服务端模板中用条件包裹（如
{% if group %}<optgroup label="{{name}}">...</optgroup>{% endif %}）时，必须确保{{name}}非空且已求值，否则结构断裂
嵌套结构错误让整个 optgroup 被浏览器忽略
<optgroup></optgroup> 只允许一层扁平结构，且只能作为 <select></select> 的**直接子元素**。任何嵌套、包裹或中间插入文本节点，都会被解析器丢弃。
-
<select><div><optgroup label="华东"></optgroup></div></select>→<optgroup></optgroup>被跳过 -
<optgroup label="前端"><optgroup label="框架"><option>Vue</option></optgroup></optgroup>→ 内层被忽略，可能只剩外层空标题 - 正确结构只有一种：
<select><optgroup label="水果"><option>苹果</option></optgroup> <option>其他</option></select>，<option></option>和<optgroup></optgroup>是同级节点
动态插入 optgroup 必须用 select.add() 且先赋值 label
不能用 appendChild() 往 <select></select> 插入 <optgroup></optgroup>，否则无效。必须调用原生 add() 方法，并在插入前显式设置 label。
- ✅ 正确：
const optgroup = document.createElement('optgroup'); optgroup.label = '国产车型'; select.add(optgroup); - ❌ 错误：先
select.appendChild(optgroup)，再设optgroup.label→ 不生效 - ❌ 错误：设了
optgroup.label，但对应<option></option>尚未插入 DOM → 赋值被静默丢弃 - 往
<optgroup></optgroup>内添加<option></option>时，可用optgroup.appendChild(option)，没问题
iOS Safari 和部分旧版 Safari 对 optgroup 的支持极弱
iOS 原生 <select></select> 弹出层（系统 Picker）**完全不显示 <optgroup label></optgroup>**，所有选项扁平排列。Safari 16 及更早版本对 disabled 属性也完全忽略。
- 用户在 iPhone 上点开下拉，根本看不到“华东地区”“华北地区”等分组信息
-
<optgroup disabled></optgroup>在 Safari 中形同虚设，组内<option></option>仍可点、可键盘聚焦、可提交 - 若业务强依赖分组语义，必须放弃原生
<select></select>，改用 JS 实现的组件（如 Choices.js、tom-select），或服务端按平台做降级处理 - 底线方案：把关键信息放在
<option></option>文本开头，例如<option value="sh">● 上海</option>，靠 Unicode 符号模拟层级，确保 Safari 至少能读到城市名
真正难的不是怎么写标签，而是 label 写什么、哪些项该归进同一组、以及要不要为 iOS 单独准备 fallback —— 这些决策一旦定错，<optgroup></optgroup> 就只是 HTML 里一段安静的废代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
