1. Web
  2. HTML
  3. 参考
  4. 元素
  5. <optgroup>

<optgroup>: Option Group 元素

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

* 此特性的某些部分可能存在不同级别的支持。

<optgroup> HTML 元素用于在 <select> 元素内创建选项组。

在可自定义的 <select> 元素中，允许将 <legend> 元素作为 <optgroup> 的子元素，以提供一个易于定位和样式化的标签。这会替换在 <optgroup> 元素的 label 属性中设置的任何文本，并且具有相同的语义。

试一试

<label for="dino-select">Choose a dinosaur:</label>
<select id="dino-select">
  <optgroup label="Theropods">
    <option>Tyrannosaurus</option>
    <option>Velociraptor</option>
    <option>Deinonychus</option>
  </optgroup>
  <optgroup label="Sauropods">
    <option>Diplodocus</option>
    <option>Saltasaurus</option>
    <option>Apatosaurus</option>
  </optgroup>
</select>

label {
  display: block;
  margin-bottom: 10px;
}

注意：Optgroup 元素不能嵌套。

属性

此元素包含全局属性。

disabled

如果设置了此布尔属性，则此选项组中的任何项目都不可选。浏览器通常会使此类控件变灰，并且它不会接收任何浏览事件，例如鼠标单击或与焦点相关的事件。

label

选项组的名称，浏览器可以在用户界面中用于标记选项。如果使用了此元素，则此属性是必需的。

示例

html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

结果

技术摘要

内容类别 无。
允许内容 零个或多个 <option> 元素。在可自定义的 select 元素中，允许将 <legend> 元素作为 <optgroup> 的子元素。
标签省略 开始标签是必需的。如果此元素后面紧跟着另一个 <optgroup> 元素，或者父元素没有更多内容，则结束标签是可选的。
允许父级 一个 <select> 元素。
隐式 ARIA 角色 group
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLOptGroupElement

规范

规范
HTML
# the-optgroup-element

浏览器兼容性

另见

  • 其他表单相关元素：<form>、<legend>、<label>、<button>、<select>、<datalist>、<option>、<fieldset>、<textarea>、<input>、<output>、<progress> 和 <meter>。
  • 可定制的 select 元素

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，作者是 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误