<optgroup>: Option Group 元素
Baseline 廣泛可用 *
<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 元素不能巢狀。
屬性
此元素包含全域性屬性。
示例
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 元素