optgroup 的 label 必须非空且 trim 后有效，否则整组静默消失；必须为 select 直接子元素，禁用仅影响选项交互；移动端显示受限，高级功能需替代方案。
optgroup 能分组，但 label 属性一写错，整组就静默消失——不是没效果，是浏览器直接跳过解析。
label 属性必须非空且.trim()后不为空
浏览器只靠 label 属性渲染分组标题，漏写、写空字符串 ""、或只写空格 " " 都会导致该 optgroup 完全不显示（内部 option 仍存在，但失去分组语义）。
- 服务端模板中要加判空：
{% if group.label|trim %}<optgroup label="{{ group.label|trim }}"></optgroup>{% endif %} - JS 动态创建时，必须在插入前显式赋值：
optgroup.label = data.groupName?.trim() || "未命名"; - 中文 label 控制在 2–4 字，避免“其他分类”“Group 1”这类模糊表述；国际化项目中严禁硬编码，必须由 JS 或模板变量注入
optgroup 必须是 select 的直接子元素
任何嵌套或包裹都会让浏览器忽略整个 optgroup —— 不报错、不警告，DOM 里都看不到它。
- 错误写法：
<div><optgroup label="水果"></optgroup></div>、<select><form><optgroup></optgroup></form></select> - 错误写法：
<optgroup label="省"><optgroup label="市"><option>杭州</option></optgroup></optgroup>（嵌套optgroup违反 HTML 规范） - 正确结构唯一：
<select><optgroup label="水果"><option>苹果</option></optgroup></select>
disabled 加在 optgroup 上，标题仍可见但选项不可选
这是规范行为，不是 bug。optgroup 的 disabled 只影响其下所有 option 的可交互性，不影响 label 渲染。
立即学习“前端免费学习笔记（深入）”；
- 常见误判：看到标题还在，以为
disabled没生效 → 实际上选项已灰显且无法点击 -
optgroup disabled和单个option disabled可共存，但后者不会“覆盖”前者；若整组已禁用，再单独启用某个option无效 - 想彻底隐藏某组？不能靠
disabled，得用 JS 移除节点，或服务端不输出该optgroup
移动端和无障碍支持的真实限制
iOS 原生 select 几乎不显示 optgroup label，屏幕阅读器虽能读出，但用户视觉上无感知；CSS 定制能力也极弱。
-
color和font-style在多数桌面浏览器可用，但background-color、padding、height基本无效 - Safari 对
optgroup的 CSS 支持最差，连font-weight都可能不生效 - 需要图标、悬停、搜索等高级功能？必须放弃原生
select，改用Choices.js或自研<div>下拉
最易被忽略的点：label 值不解析 HTML，写 label="<strong>水果</strong>" 就真显示那串字符；动态插入时用 appendChild() 会报错，必须用 select.add(optgroup)。
