是唯一原生、语义正确且无障碍友好的下拉分组方式，但必须有非空label、直接嵌套于内、禁用仅作用于选项而非标题，且不参与表单提交。
<optgroup></optgroup> 是唯一原生、语义正确、无障碍友好的分组方式，但必须严格满足嵌套规则和属性要求，否则静默失效——不是“没效果”，而是浏览器直接忽略整个分组。
为什么<optgroup></optgroup>写对了却看不到分组标题
最常见原因是 label 属性缺失或为空。它不是可选属性：<optgroup></optgroup> 没有 label，标题就不渲染，内部 <option></option> 仍会显示，但失去分组语义。
-
label=""或label=" "（纯空格）在 Chrome/Firefox 中等同于无label，Safari 可能渲染空白行，导致错位 -
label值不支持 HTML 标签，写label="<strong>水果</strong>"会原样显示文字 "水果"，不会加粗 - 把
<optgroup></optgroup>放在<div> 或 <code><form></form>里（而非直接子级），浏览器完全忽略，控制台无报错 - 服务端模板中多了一层条件标签（如
{% if showGroup %}<optgroup>...</optgroup>{% endif %}），可能导致结构断裂 - 错误写法：
select.appendChild(optgroup)→ Chrome 报DOMException: Failed to execute 'appendChild' on 'Node' - 正确写法：
select.add(optgroup)，且插入前必须设optgroup.label = "华东地区" - 往
<optgroup></optgroup>内添加<option></option>时，可用optgroup.appendChild(option)，没问题 - 如果先设
select.value = "sh"，但对应<option value="sh"></option>尚未插入 DOM，赋值会被静默丢弃，不报错也不回退 -
<optgroup disabled><option value="py">Python</option></optgroup>→ Python 不可选，但“后端”标题仍显示 - 想让某组彻底消失？只能 JS 移除该
<optgroup></optgroup>节点，或服务端不输出 -
<optgroup></optgroup>本身没有value，设了也无效；表单提交、select.value、FormData.get()都只取<option></option>的value - 禁用某个具体选项，直接给
<option disabled></option>加属性即可，无需动<optgroup></optgroup> - 动态加载数据时，必须自己把分组数据转成含
<optgroup label="xxx">...</optgroup>的完整 HTML 字符串 - 用
innerHTML = ""或.empty().append()时，确保新内容包含完整的<optgroup></optgroup>嵌套，不能只 append<option></option> - 调用
form.render('select')必须在 DOM 更新完成之后，否则样式错乱或分组丢失 - React/Vue 等框架中，不要依赖 JSX/模板语法自动解析
<optgroup></optgroup>；需确保最终渲染的 HTML 符合规范，尤其注意 SSR 和 hydration 一致性
动态插入<optgroup></optgroup>时为什么报错或不生效
不能用 appendChild() 往 <select></select> 插入 <optgroup></optgroup>，必须调用 select.add() 方法；且 label 必须在插入前显式赋值。
<optgroup disabled></optgroup> 看起来没禁用？真相是它只禁选项、不隐藏标题
disabled 加在 <optgroup></optgroup> 上，会让整组 <option></option> 变灰不可选，但分组标题（label）依然可见、不可点击——这不是 bug，是规范行为。很多人误以为“标题还在=没禁用”，其实禁用已生效。
Layui 或其他 UI 框架里<optgroup></optgroup>突然消失
Layui 的 form.render('select') 不会帮你生成 <optgroup></optgroup>，它只渲染你给它的原始 DOM 结构。一旦你用 JS 清空再重填，又没手动拼好 <optgroup></optgroup> 标签，分组就永远找不回来了。
真正容易被忽略的是：键盘导航（Tab + 方向键）会跳过分组标题，直接落到可选项上；屏幕阅读器对 label 的播报在 iOS Safari 和部分 Android 浏览器中不可靠；如果你的业务逻辑依赖“用户属于哪个分组”，千万别只靠 <optgroup></optgroup> —— 它不提交、不参与校验，必须把分组标识编码进 <option value></option> 或额外字段里。
