<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.
<optgroup> は HTML の要素で、 <select> 要素内の選択肢のグループを作成します。
カスタマイズ可能な <select> 要素 では、<legend> 要素を <optgroup> の子要素として使用できるため、対象とスタイル設定がしやすいラベルを提供できます。これは <optgroup> 要素の label 属性で設定されたテキストを置き換え、そして同じ意味づけを持ちます。
試してみましょう
<label for="dino-select">恐竜を選択:</label>
<select id="dino-select">
<optgroup label="獣脚類">
<option>ティラノサウルス</option>
<option>ヴェロキラプトル</option>
<option>デイノニクス</option>
</optgroup>
<optgroup label="竜脚類">
<option>ディプロドクス</option>
<option>ソルトサウルス</option>
<option>アパトサウルス</option>
</optgroup>
</select>
label {
display: block;
margin-bottom: 10px;
}
メモ: optgroup 要素を入れ子にすることはできません。
属性
この要素にはグローバル属性があります。
例
html
<select>
<optgroup label="グループ 1">
<option>選択肢 1.1</option>
</optgroup>
<optgroup label="グループ 2">
<option>選択肢 2.1</option>
<option>選択肢 2.2</option>
</optgroup>
<optgroup label="グループ 3" disabled>
<option>選択肢 3.1</option>
<option>選択肢 3.2</option>
<option>選択肢 3.3</option>
</optgroup>
</select>
結果
技術的概要
| コンテンツカテゴリー | なし |
|---|---|
| 許可されている内容 | 0 個以上の <option> 要素。 カスタマイズ可能な select 要素では、 <legend> 要素が <optgroup> の子として許可されます。 |
| タグの省略 |
開始タグは必須。要素の直後に他の <optgroup> 要素が接続する場合、または親要素が他の内容を持たない場合、終了タグが省略可能となる。
|
| 許可されている親要素 | <select> 要素 |
| 暗黙の ARIA ロール | group |
| 許可されている ARIA ロール | 許可されている role なし |
| DOM インターフェイス | HTMLOptGroupElement |
仕様書
| Specification |
|---|
| HTML # the-optgroup-element |
ブラウザーの互換性
Loading…