<optgroup label=""></optgroup>

更新日
仕様 HTML Living Standard
分類 ---
利用場所 select要素の子要素として
内容 option要素を0個以上 / スクリプトサポート要素

optgroup要素は、プルダウンメニューの選択肢をグループ化します。この要素は、select要素の子要素として使用します。


<select name="example">

<optgroup label="グループA">
<option>選択肢A-1</option>
<option>選択肢A-2</option>
<option>選択肢A-3</option>
</optgroup>

</select>
属性 値
必須属性
label="" グループのラベル 文字列 ラベルとして表示する文字列
任意属性
disabled 選択肢グループの無効化 （disabled） 値は省略可能

label属性について

label属性は、選択肢グループのラベルを指定します。この属性の値が、グループのラベルとしてメニュー内に表示されます。（これは必須属性です）

<optgroup label="グループA">
<option>選択肢A-1</option>
<option>選択肢A-2</option>
<option>選択肢A-3</option>
</optgroup>

disabled属性について

disabled属性は、そのグループ内の選択肢を無効化します。

無効化された選択肢は、選択することができなくなります。

<optgroup label="グループA" disabled>
<option>選択肢A-1</option>
<option>選択肢A-2</option>
<option>選択肢A-3</option>
</optgroup>

使用例

3つのグループを配置した例

<select name="example">

<option value="">選択してください</option>

<optgroup label="グループA">
<option>選択肢A-1</option>
<option>選択肢A-2</option>
<option>選択肢A-3</option>
</optgroup>

<optgroup label="グループB">
<option>選択肢B-1</option>
<option>選択肢B-2</option>
<option>選択肢B-3</option>
</optgroup>

<optgroup label="グループC">
<option>選択肢C-1</option>
<option>選択肢C-2</option>
<option>選択肢C-3</option>
</optgroup>

</select>
表示例
disabled属性を指定した例

<select name="example">

<option value="">選択してください</option>

<optgroup label="グループA">
<option>選択肢A-1</option>
<option>選択肢A-2</option>
<option>選択肢A-3</option>
</optgroup>

<optgroup label="グループB" disabled>
<option>選択肢B-1</option>
<option>選択肢B-2</option>
<option>選択肢B-3</option>
</optgroup>

<optgroup label="グループC">
<option>選択肢C-1</option>
<option>選択肢C-2</option>
<option>選択肢C-3</option>
</optgroup>

</select>
表示例