<optgroup>タグの解説
<optgroup>は、選択式のメニューに含まれる項目のグループを作成します。<select>の子要素に配置された<option>をまとめて、グループの先頭に見出しを付ける機能があります。
<select>で作成したメニューは、プルダウン式のリストとして表示されますが、選択肢の数が増えると目的の項目を探し辛くなります。<optgroup>は、そのようなリストの項目をカテゴリーやジャンルで分類して見やすく整理したい場合に役立ちます。
この要素を使用すると、選択式メニューの項目がグループごとに区分けされたリストとして表示されます。各グループの先頭には見出しを表示できるため、数が多い項目の中から条件を絞り込む目安となります。
<optgroup>タグの特徴
- レイアウトには影響を与えません。セレクト項目の一覧表に階層を与えます。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<optgroup>要素に指定できる属性
label- グループ化した項目を代表する見出しを指定します。必須属性です。
disabled- ユーザーの操作を受け付けない状態にします。既定値ではインターフェイスの色が薄くなり、クリックやフォーカスなどのイベントに反応しなくなります。これは値のない論理属性です。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<optgroup>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。配置箇所は必ず<select>の子要素であり、<option>の親要素になります。label属性は必須です。グループの先頭に表示させる見出しを指定できます。
<select name="key">
<optgroup label="name">
<option value="1">メニュー項目１</option>
<option value="2">メニュー項目２</option>
<option value="3">メニュー項目３</option>
</optgroup>
</select>
disabled属性でユーザーの操作を受け付けないグループにする
disabled属性を指定すると、ユーザーの操作を受け付けない状態になります。前のページやフォームに配置されたデータフィールドの状況をトリガーにして、選択できる項目を変えたい場合などに有効です。
<select name="key">
<optgroup label="name">
<option value="1">メニュー項目１</option>
<option value="2">メニュー項目２</option>
<option value="3">メニュー項目３</option>
</optgroup>
<optgroup label="disabled" disabled>
<option value="4">選択できません</option>
<option value="5">選択できません</option>
<option value="6">選択できません</option>
</optgroup>
</select>
カテゴリーやジャンルごとに項目を分類して見出しをつける
カテゴリーやジャンルで分けられる項目であれば、積極的に<optgroup>で囲い階層化してしまいましょう。選択肢が多くなったメニューはユーザーの直下的な操作の妨げになります。
<form class="sample-block">
<p>機材を選んで下さい。</p>
<select name="studio">
<optgroup label="ギターアンプ">
<option value="marshall">マーシャル</option>
<option value="mesa">メサブギー</option>
<option value="fender">フェンダー</option>
<option value="roland">ローランド</option>
</optgroup>
<optgroup label="ベースアンプ">
<option value="ampeg">アンペグ</option>
<option value="gibson">ギブソン</option>
<option value="hartke">ハートキー</option>
<option value="peavey">ピーヴィー</option>
</optgroup>
</select><br>
<button type="submit">決定</button>
</form>