optgroup是HTML唯一原生、语义正确且无障碍友好的下拉分组方式，但label为空或仅含空格、嵌套使用、非select直接子元素、动态插入顺序错误等任一问题均导致浏览器静默忽略整组。
optgroup 不是“可选美化”，它是 HTML 唯一原生、语义正确、无障碍友好的下拉分组方式——但写错一行，整组就会被浏览器静默忽略，而不是报错或显示异常。
label 属性为空或只含空格，分组就彻底消失
浏览器只靠 label 渲染分组标题，没它等于没写 optgroup。这不是样式问题，是解析器直接跳过整段节点。
-
<optgroup><option>苹果</option></optgroup>：漏写label，DOM 中可能根本找不到该optgroup -
<optgroup label="">或<optgroup label=" ">：在 Chrome/Firefox 中等效于无label；Safari 可能渲染空白行，导致视觉错位 - 服务端模板中要加判空：
{% if group.label|trim %}<optgroup label="{{ group.label|trim }}"></optgroup>{% endif %} - JS 动态创建时，必须在
select.add()前赋值：optgroup.label = data.name?.trim() || "未命名"
必须是 select 的直接子元素，嵌套即失效
optgroup 不是独立控件，它只能平级出现在 select 内部，且内部只允许 option。任何包裹、嵌套或夹杂都会让浏览器静默丢弃整组。
- ❌
<div><optgroup label="水果"></optgroup></div> - ❌
<select><form><optgroup label="蔬菜"></optgroup></form></select> - ❌
<select><optgroup><optgroup label="A"></optgroup></optgroup></select>（嵌套optgroup违反 HTML 规范） - ✅ 正确结构唯一：
<select><optgroup label="水果"><option>苹果</option></optgroup></select>
给 optgroup 加 disabled，选项禁用但标题仍可见
这是规范行为，不是 bug。disabled 作用于整组 option，但不控制 label 的渲染。用户看到标题还在，恰恰说明禁用已生效。
立即学习“前端免费学习笔记（深入）”；
-
<optgroup label="待上线" disabled><option value="new">新功能</option></optgroup>→ “待上线”可见，但选项不可点、不可键盘聚焦（Chrome/Firefox/Edge） - Safari 16 及更早版本完全忽略
optgroup disabled，组内option仍可交互 → 全平台一致禁用，必须手动给每个option加disabled - 想让某组彻底不出现？不能靠
disabled，得用 JS 移除整个optgroup节点，或服务端不输出该标签 -
optgroup本身没有value，设了也无效；表单提交、select.value、FormData.get()都只取option的值
移动端和 CSS 定制能力极弱，别硬改原生样式
iOS Safari 原生弹出 Picker 根本不显示 optgroup label，所有选项扁平排列；CSS 对 optgroup 的支持也极其有限——不是你代码写错了，是浏览器根本不支持。
- 可用的样式极少：
color、font-weight在部分桌面浏览器中勉强生效；background-color、padding、margin、伪元素基本全部无效 - iOS 原生 select 中，
optgroup的label通常完全不显示，只渲染option -
label值不解析 HTML：label="<strong>水果</strong>"就真显示为文字，不会加粗 - 需要图标、搜索、悬停、多级分类？必须放弃原生
select，改用 JS 组件（如Choices.js或自研<div>下拉）
最易被忽略的点：动态插入时不能用 appendChild() 往 select 添加 optgroup，必须调用 select.add()；且 label 必须在插入前显式赋值——顺序错了，就白写了。
