View in EnglishAlways switch to English

<optgroup>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

**HTML 元素<optgroup> **为<select> 元素中的选项创建分组。

尝试一下

<label for="dino-select">Choose a dinosaur:</label><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;}

内容分类	无
允许的内容	0 或多个`<option>` 元素
标签省略	开始标签是必须的。当该元素后面也跟着一个 <optgroup> 元素，或该元素的父元素没有其他内容时，结束标签可省略。
允许的父元素	一个`<select>` 元素。
Implicit ARIA role	`group`
Permitted ARIA roles	No`role` permitted
DOM 接口	`HTMLOptGroupElement`

备注：Optgroup elements may not be nested.

属性

这个元素包含global attributes。

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>