optgroupタグ
optgroupは、リストをグループ化するタグです。
解説
optgroupタグは、optionタグの親要素として使用します。
リスト要素がたくさんある場合、optgroupタグを使ってグループ化して分かりやすくするといった使い方をします。
コンテンツ・モデル
| カテゴリー (自カテゴリ) | なし |
| コンテキスト (親カテゴリ) | selectタグ |
| コンテンツ・モデル (子カテゴリ) | optionタグ |
属性
optgroupタグには以下の属性が指定できます。
| 属性 | 説明 |
|---|---|
| label | ラベルを指定する（必須） （例）label="項目１" |
| disabled | 非活性にする （例）disabled="disabled" ※disableのみでもOKです。 |
| 属性 | 説明 |
|---|---|
| class | クラスを指定する （例）class="hoge" |
| id | IDを指定する （例）id="foo" |
| style | スタイルを指定する （例）style="color:red;" |
その他のグローバル属性値については、グローバル属性をご覧ください。
サンプル
リスト要素の都道府県を地域ごとにグループ化するサンプル
<select>
<optgroup label="北海道・東北">
<option value="hokkaido">北海道</option>
<option value="aomori">青森県</option>
<option value="iwate">岩手県</option>
<option value="miyagi">宮城県</option>
<option value="akita">秋田県</option>
<option value="yamagata">山形県</option>
<option value="fukushima">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="tokyo" disabled="disabled">東京都</option>
<option value="chiba">千葉県</option>
<option value="kanagawa">神奈川県</option>
<option value="saitama">埼玉県</option>
<option value="gumma">群馬県</option>
<option value="tochigi">栃木県</option>
<option value="ibaraki">茨城県</option>
</optgroup>
<optgroup label="東海">
<option value="aichi">愛知県</option>
<option value="shizuoka">静岡県</option>
<option value="gifu">岐阜県</option>
<option value="mie">三重県</option>
</optgroup>
</select>
このサンプルでは、東京都はdisabledが指定してあるので選択できなくなっています。
備考
- optgroupは「option group」の略です。
