<optgroup>标签用于在<select>中对选项逻辑分组，不可选中，仅作语义容器；需嵌套于<select>内，用label定义名称，内部只容<option>；不支持嵌套或disabled属性；CSS和JS操作需注意兼容性与限制。

<optgroup> 标签用于在 HTML5 的 <select> 下拉菜单中对选项进行逻辑分组，提升可读性和用户体验。它本身不可被选中，只作为视觉与语义上的分类容器。

基本用法与结构

必须嵌套在 <select> 内部，每个 <optgroup> 通过 label 属性定义分组名称，内部只能包含 <option> 元素：

<select>
  <optgroup label="水果">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
  </optgroup>
  <optgroup label="蔬菜">
    <option value="carrot">胡萝卜</option>
    <option value="tomato">番茄</option>
  </optgroup>
</select>

关键规则与限制

• <optgroup> 不能嵌套其他 <optgroup> 或交互元素（如按钮、输入框）
• 不支持 disabled 属性直接禁用整个分组（但可为每个 <option> 单独设置）
• 部分旧版浏览器可能忽略 label 的样式，建议配合 CSS 增强可访问性
• 屏幕阅读器会朗读 label 值，帮助视障用户理解选项归属

增强可用性的实用技巧

• 用清晰、简短的中文 label（如“国内城市”“国际城市”），避免歧义
• 同一 <select> 中多个 <optgroup> 应保持逻辑并列，不交叉、不重复
• 可通过 CSS 设置 optgroup { font-weight: bold; color: #555; } 突出分组标题
• 移动端注意：iOS Safari 对 <optgroup> 的渲染较简略，需实机测试显示效果

与 JavaScript 配合的注意事项

JS 操作时，<optgroup> 是 HTMLOptGroupElement 类型节点，可通过 element.children 获取其下的 <option>，但不能直接设置 value 或 selected —— 这些属性只属于 <option>。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

动态添加分组时，推荐先创建 <optgroup>，再逐个追加 <option>，最后插入到 <select> 中，避免渲染异常。

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