需严格遵循html规范：label必须非空且为select直接子元素，嵌套或位置错误会导致静默失效；disabled仅禁用选项不隐藏标题；safari旧版存在兼容问题；动态添加须用select.add()。
直接用 <optgroup></optgroup>，但 label 属性一写错、位置一放偏，整组就静默消失——不是没效果，是浏览器压根不解析。
label 属性必须非空且 trim 后有效
浏览器只靠 label 渲染分组标题，漏写、写成 label=""、或只写空格 label=" "，该 <optgroup></optgroup> 就会被跳过。DOM 里看不到它，option 虽在，但失去分组语义，屏幕阅读器也读不出归属。
- 服务端模板中必须判空：
{% if group.label|trim %}<optgroup label="{{ group.label|trim }}"></optgroup>{% endif %} - JS 动态创建时顺序不能错：先
const optgroup = document.createElement('optgroup')，再optgroup.label = data.name?.trim() || '未命名'，最后select.add(optgroup) - 中文
label控制在 2–4 字，比如"华东"、"待审核"，别用"其他分类"这类模糊表述 -
label不解析 HTML，写label="<strong>水果</strong>"就真显示那串字符
optgroup 必须是 select 的直接子元素
它不是通用容器，只能平级出现在 <select></select> 内部，且内部只允许 <option></option>。任何嵌套、包裹、夹杂都会导致整组被忽略，不报错、不警告，DOM 里可能根本找不到节点。
- 错误写法：
<div><optgroup label="水果"></optgroup></div>、<select><form><optgroup></optgroup></form></select> - 更隐蔽的错误：
<optgroup label="省"><optgroup label="市"><option>杭州</option></optgroup></optgroup>（嵌套<optgroup></optgroup>违反 HTML 规范） - 正确结构唯一：
<select><optgroup label="水果"><option>苹果</option></optgroup></select> - 模板引擎中写条件块时，注意别让
<optgroup></optgroup>前后结构断裂，比如{% if show %}<optgroup></optgroup>{% endif %}若show为 false，可能导致<select></select>内部只剩孤立<option></option>
disabled 属性加在 optgroup 上只禁用选项，不隐藏 label
这是规范行为，不是 bug。<optgroup disabled></optgroup> 会让内部所有 <option></option> 灰显不可点，但 label 文字依然清晰可见。很多人误以为“标题还在=没生效”，其实禁用已起效。
- 想彻底隐藏某组？不能靠
disabled，得用 JS 移除整个<optgroup></optgroup>节点，或服务端不输出该标签 - 想单独禁用某个选项，直接给对应
<option disabled></option>加属性即可 - Safari 16 及更早版本中，
<optgroup disabled></optgroup>完全无效；iOS 原生 select 弹出层根本不显示label，分组信息彻底丢失 - 全平台一致禁用：必须手动给每个
<option></option>加disabled，再配合 CSS 隐藏<optgroup></optgroup>
动态插入必须用 select.add()，不能用 appendChild()
往 <select></select> 插入 <optgroup></optgroup> 时，appendChild() 会报错或静默失败。Chrome 报 DOMException: Failed to execute 'appendChild' on 'Node'，Firefox 和 Safari 则可能直接跳过。
- 正确做法：
select.add(optgroup)—— 这是<select></select>元素的专有方法 - 往
<optgroup></optgroup>内添加<option></option>时，才可用optgroup.appendChild(option) - 设置默认选中项（如
select.value = "sh"）前，确保对应<option></option>已插入 DOM，否则赋值会被丢弃，且无任何提示 - 多个同级
<optgroup></optgroup>是允许的，但它们之间不能有注释、文本节点或空格干扰 DOM 结构（旧版 Safari 尤其敏感）
最常被忽略的点：哪怕 <optgroup></optgroup> 正确写了，只要父 <select></select> 被设了 disabled，整组都会变灰不可用——这时你没法靠样式单独启用其中某个 <option></option>，因为禁用作用于整个控件层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
