<optgroup>: 选项组标签

最后更新：2026-10-13

<optgroup>选项组标签

在 select 中将 option 按逻辑分组，显示为不可选的组标题。

<select>
  <optgroup label="水果">
    <option>苹果</option>
  </optgroup>
</select>

该元素支持全局属性及以下专有属性：

属性	值	描述
`label`		组的标题文字（必填）。
`disabled`		禁用该组全部选项。

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
<optgroup>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： optgroup 不能嵌套，且里面的 option 不能直接放在 optgroup 外。

Qoptgroup 是做什么用的？

A在 <select> 内把 <option> 分组，label 属性显示组标题（如「华北」「华东」）。组标题不可选中，仅起分类导航作用，长列表的可读性明显提升。

Qoptgroup 可以嵌套吗？

A不可以，规范只允许一层分组——optgroup 内只能放 option，嵌套optgroup 是无效 HTML。需要两级以上分类时，考虑用带前缀的选项文案或自定义组件。

Qoptgroup 的 label 会被提交吗？

A不会。提交的只有选中 option 的 value，组标题仅用于展示。它也不参与校验，禁用整个 optgroup（disabled 属性）会连带禁用组内所有选项。

更多案例即将上线，敬请期待。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。