optgroup 标签必须嵌套在 select 内，label 属性必需且需转义特殊字符，不支持嵌套分组，disabled 可作用于整组或单个 option，动态操作须用 DOM 方法而非 innerHTML，并注意可访问性与表单提交规范。
optgroup 标签必须嵌套在 select 内部，不能单独使用
浏览器会直接忽略孤立的 <optgroup>，它不是独立控件，只是 <select> 的语义化分组容器。常见错误是把它写在 <select> 外面，或试图用 JS 动态插入到非 <select> 元素中——这不会渲染出任何分组效果。
正确结构只能是：
<select>
<optgroup label="类别A">
<option value="1">选项1</option>
</optgroup>
<optgroup label="类别B">
<option value="2">选项2</option>
</optgroup>
</select>
-
label属性必需，且值会显示为灰色不可选标题（各浏览器样式略有差异） - 不支持嵌套
<optgroup>—— 二级分组无法实现 - 部分旧版 iOS Safari 对
label中文显示有截断问题，建议控制长度在 8 字以内
disabled 属性作用于整个分组，但 option 仍可单独设 disabled
给 <optgroup disabled> 加上 disabled，会让该组下所有 <option> 变灰且不可选；但某个 <option> 即使在其父 <optgroup> 已禁用，仍可额外加 disabled —— 不冲突，只是冗余。
- 若只需禁用部分选项，别禁用整个
<optgroup>，否则丧失分组语义 - JS 检测时：
select.options[i].disabled返回的是最终生效状态（继承自 optgroup 或自身） - 提交表单时，被禁用的
<optgroup>下所有<option>都不会发送
JavaScript 动态操作 optgroup 要用标准 DOM 方法，不要 innerHTML
用 innerHTML 替换 <select> 内容会重置用户已选值、清空原生 focus 状态，且在 IE 中可能丢失 <optgroup> 的 label 渲染。正确做法是用 document.createElement 和 appendChild。
立即学习“前端免费学习笔记（深入）”；
- 创建分组：
const group = document.createElement('optgroup'); group.label = '地区'; - 追加选项：
group.appendChild(optionEl);，再selectEl.appendChild(group); - 想清空某组？用
group.remove()，别用group.innerHTML = '' - 注意：动态添加后，
select.value不会自动更新，需手动触发select.dispatchEvent(new Event('change'))如果依赖监听
optgroup 在可访问性（a11y）中影响屏幕阅读器播报逻辑
主流屏幕阅读器（NVDA、VoiceOver）会把 label 作为上下文读出，例如：“省份，下拉列表，北京，选项，属于省份组”。这意味着分组名必须准确、简洁、无歧义。
- 避免用纯符号或缩写做
label，如label=">>"或label="Prc" - 不要依赖 CSS 隐藏
<optgroup label>—— 它仍会被读出，造成困惑 - 如果后端返回的数据没有天然分组字段，前端拼装前务必补全语义化的
label，而不是留空或填占位符
分组本身不改变表单提交行为，但 label 文本一旦含特殊字符（比如双引号、& 符号），必须 HTML 实体转义，否则破坏结构 —— 这点容易被忽略。
