optgroup 要素選択肢のグループを表す
optgroup 要素は option 要素のグループ、つまりプルダウンメニューにおける選択肢のグループを表します。
select 要素と、option 要素によって作成されるプルダウンメニューにおいて、その選択肢を任意のグループにまとめることができます。これにより、選択肢が多いプルダウンメニューなどにおいて、視認性や操作性を向上させることができます。
optgroup 要素の仕様
- カテゴリ
-
- なし
- コンテンツモデル
-
- 0個以上の option 要素、およびスクリプト支援要素
- この要素を使用できる文脈
select 要素の子要素として
- この要素で使用できる属性
詳細説明
optgroup 要素に指定可能な属性は下記の通りです。
| 属性 | 概要 |
|---|---|
| label 属性 | 必須属性です。選択肢グループにラベルを指定します。空ではない文字列を指定する必要があります。 |
| disabled 属性 | この属性を指定された選択肢グループは、選択できない選択肢のグループになります。 |
optgroup 要素のサンプルソース
<select name="pref"> <option value="">都道府県を選択してください</option> <optgroup label="北海道・東北地方"> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県">岩手県</option> <option value="宮城県">宮城県</option> <option value="秋田県">秋田県</option> <option value="山形県">山形県</option> <option value="福島県">福島県</option> </optgroup> <optgroup label="関東地方"> <option value="群馬県">群馬県</option> <option value="栃木県">栃木県</option> <option value="茨城県">茨城県</option> <option value="埼玉県">埼玉県</option> <option value="千葉県">千葉県</option> <option value="東京都" selected="selected">東京都</option> <option value="神奈川県">神奈川県</option> </optgroup> <optgroup label="甲信越地方" disabled="disabled"> <option value="山梨県">山梨県</option> …省略… </optgroup> </select>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |