<optgroup label=""></optgroup>
- ブラウザ
- 要素
- optgroup要素
optgroup要素で、メニューの選択肢（option要素）をグループ化することができます。この要素はselect要素の中で使用します。
階層化されたメニューの表示が期待されますが、実際にそのように表示されるブラウザは少ないようです。
<select name="example">
<optgroup label="グループA">
<option value="A1" label="A-1">サンプルA-1</option>
<option value="A2" label="A-2">サンプルA-2</option>
<option value="A3" label="A-3">サンプルA-3</option>
</optgroup>
</select>
| 属性 | 値 | 説明 |
|---|---|---|
| label="" | テキスト | グループのラベルを指定 |
| disabled | 値は不要 | 選択肢を無効化する |
optgroup要素にはlabel属性が必須となります。
このlabel属性の値は、グループのラベルとして表示されることになります。
optgroup要素にdisabled属性を指定すると、そのグループ内の選択肢を無効化することができます。しかし、optgroup要素に対するこの属性の指定は、一部のブラウザでは対応していないようです。
使用例
<form method="post" action="example.cgi">
<p><select name="example1">
<optgroup label="グループA">
<option value="A1" label="A-1">サンプルA-1</option>
<option value="A2" label="A-2">サンプルA-2</option>
<option value="A3" label="A-3">サンプルA-3</option>
</optgroup>
<optgroup label="グループB">
<option value="B1" label="B-1">サンプルB-1</option>
<option value="B2" label="B-2">サンプルB-2</option>
<option value="B3" label="B-3">サンプルB-3</option>
</optgroup>
<optgroup label="グループC">
<option value="C1" label="C-1">サンプルC-1</option>
<option value="C2" label="C-2">サンプルC-2</option>
<option value="C3" label="C-3">サンプルC-3</option>
</optgroup>
</select></p>
<p><input type="submit" value="送信する"></p>
</form>
表示例
※サンプルのため送信できません。
■グループBを無効化した例
※IEでは対応していないようです。
<form method="post" action="example.cgi">
<p><select name="example2">
<optgroup label="グループA">
<option value="A1" label="A-1">サンプルA-1</option>
<option value="A2" label="A-2">サンプルA-2</option>
<option value="A3" label="A-3">サンプルA-3</option>
</optgroup>
<optgroup label="グループB" disabled>
<option value="B1" label="B-1">サンプルB-1</option>
<option value="B2" label="B-2">サンプルB-2</option>
<option value="B3" label="B-3">サンプルB-3</option>
</optgroup>
<optgroup label="グループC">
<option value="C1" label="C-1">サンプルC-1</option>
<option value="C2" label="C-2">サンプルC-2</option>
<option value="C3" label="C-3">サンプルC-3</option>
</optgroup>
</select></p>
<p><input type="submit" value="送信する"></p>
</form>
表示例
※サンプルのため送信できません。
- サイト内検索
