<optgroup label=""></optgroup>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 ---
利用場所 select要素の子要素として
内容 option要素を0個以上 / スクリプトサポート要素

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


<select name="example">

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

</select>

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

label属性について

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

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

disabled属性について

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

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

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

使用例

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

<select name="example">

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

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

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

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

</select>

表示例
disabled属性を指定した例

<select name="example">

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

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

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

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

</select>

表示例