<optgroup> 用于在 <select> 中分组 <option>，必填 label 属性，不可嵌套、不可选、不提交值，仅提供语义化分组与无障碍支持。

用 <optgroup> 包裹同类 <option> 实现分组

HTML 中没有独立的“分组选择器”，但 <optgroup> 元素专为这个目的设计：它必须嵌套在 <select> 内，且只能包含 <option>，不能嵌套其他 <optgroup> 或交互元素。

常见错误是把 <optgroup> 放在 <select> 外，或试图给它加 value 属性（它本身不可选，也不提交值）。

• label 属性必填，否则分组标题不显示；中文、空格、符号均可，但不要含 HTML 实体（如   会被原样显示）
• 浏览器默认将分组标题置灰、加粗，并缩进其下的 <option>，无需 CSS 即可识别层级
• 所有 <option> 必须有 value，否则提交时该选项为空字符串，哪怕文本可见

分组后 value 和 text 的取值逻辑不变

JavaScript 获取选中项时，select.value 仍返回所选 <option> 的 value 属性值，与是否在 <optgroup> 中无关；select.selectedOptions[0].text 返回的是 <option> 标签内的文本，不是 <optgroup> 的 label。

容易混淆的点：有人误以为分组能改变表单提交结构——实际提交数据仍是 name=value 键值对，分组信息不会被发送。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

立即学习“前端免费学习笔记（深入）”；

• 若需在后端区分分组，得靠 value 命名约定，例如 value="fruits_apple" 或加前缀字段
• 用 querySelector 找某个分组下的选项时，写法是 select.querySelector('optgroup[label="水果"] option')，注意引号嵌套
• 禁用整个分组？不行。只能逐个设 <option disabled>，<optgroup disabled> 在部分浏览器（如 Safari）不生效

无障碍与键盘导航下分组的实际表现

屏幕阅读器会读出 <optgroup label="..."> 的 label，然后依次读每个 <option>，中间有自然停顿。这是分组真正起作用的关键场景——纯视觉分隔不如语义化分组可靠。

但要注意：如果 <optgroup> 下没有可用 <option>（全 disabled），某些读屏工具可能跳过该分组，用户无法感知其存在。

• 避免空分组：删掉 <optgroup label="暂无分类"></optgroup> 这类占位写法
• 不要用 <optgroup> 替代分类筛选逻辑——它不提供折叠/展开，也不响应点击
• 移动端 iOS Safari 对 <optgroup> 的 label 字体大小支持不稳定，建议用简单短语，避免换行

分组本身轻量，但一旦混入动态渲染、disabled 状态切换或国际化 label，就容易漏掉语义一致性检查——比如 JS 插入新 <option> 时忘了归属到对应 <optgroup>，结果它出现在最顶部，破坏逻辑层级。