<optgroup>用于语义化分组下拉菜单，必须设简明label、扁平嵌套于<select>内，每组至少两个选项，禁用需单独设置option的disabled属性。
用 <optgroup> 给下拉菜单分组，核心是语义清晰、结构合规、用户好找。它不是装饰，而是提升可读性和可访问性的关键标签。
label 必须写，且要简明准确
每个 <optgroup> 都得带 label 属性，浏览器靠它识别分组标题。空值、纯空格或含 HTML 标签都会让标题不显示，但选项还在——造成“有组无名”的混乱。
- ✅ 推荐写法：
<optgroup label="华东地区">、<optgroup label="入门款"> - ❌ 避免写法：
<optgroup label="">、<optgroup label=" ">、<optgroup label="<em>热门</em>"> - label 文字应反映用户认知习惯，比如按地域、价格、功能或使用场景分，别用内部代号如“Group A”或“Cat-01”
结构必须扁平，不能嵌套或包裹
<optgroup> 只能直接放在 <select> 里面，这是 HTML 规范强制要求。任何中间层（哪怕只是注释或 div）都会导致整个分组被浏览器静默忽略——选项照常出现，但标题消失、语义丢失、屏幕阅读器也读不到。
- ✅ 正确结构：
<select><optgroup label="手机"><option>iPhone</option></optgroup></select> - ❌ 常见失效写法：
<select><div><optgroup label="平板"></optgroup></div></select>、<select><!-- 注释 --><optgroup label="耳机"></optgroup></select> - 动态添加时，要用
select.add(optgroup)，而不是appendChild，否则部分浏览器会报错或丢弃
每组至少两个选项，避免“单例分组”
一个分组里只放一条 <option>，不仅浪费视觉空间，还会干扰用户扫描节奏。这类分组反而增加理解成本，降低选择效率。
- 把零散的单选项归并到逻辑相近的组里，或直接取消分组
- 例如：“其他品牌”下只有“一加”一项，不如把它并入“安卓手机”组，或删掉该分组改用统一列表
- 同一
<select>中多个<optgroup>应保持并列关系，不交叉、不重叠，比如不要同时存在“按价格”和“按品牌”两套逻辑
配合 CSS 和可访问性做轻量优化
浏览器默认对 <optgroup> 的样式较简略（比如灰色加粗），可微调增强辨识度，但不能破坏语义结构。
- 可用 CSS 设置：
optgroup { font-weight: 600; color: #444; padding-left: 8px; } - 切勿用
display: none隐藏<optgroup>，这会让屏幕阅读器完全跳过该组 - 移动端需实机测试，iOS Safari 对分组渲染较弱，必要时可通过字体大小或间距强化区分
- 禁用整组？
<optgroup>不支持disabled属性，如需灰掉某组，请为组内每个<option>单独加disabled
