最終更新日 2021年4月7日

optgroup要素

optgroup要素は、メニューの選択肢項目を、見出し付きでグループ化します。グループ化する対象の選択肢項目として、子要素にoption要素を含めます。プルダウン形式のメニューなどに利用できます。

label属性は、指定しなければならない必須の属性です。グループの名前を指定します。

disabled属性を指定すると、option要素のグループが一括で使用不可に設定されます。

optgroup要素の終了タグは、直後に別のoptgroup要素があるか、もしくはoptgroup要素が親要素内の最終コンテンツである場合に省略可能です。

HTML5での変更点

特にありません

カテゴリ	タグの省略	親要素	子要素
なし	終了タグのみ省略可能	select	option

属性	値	説明
label	文字列	選択肢グループの見出しを指定します。
disabled	disabled	論理属性。optgroup要素内の項目が使用不可になります。
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <p>お好みの商品を選択して下さい。</p>
  <select name="product">
    <optgroup label="レギュラーメニュー">
      <option value="cheese">チーズバーガー</option>
      <option value="fileo">フィレオフィッシュ</option>
      <option value="teriyaki">てりやきバーガー</option>
    </optgroup>
    <optgroup label="サイドメニュー">
      <option value="potato">フライドポテト</option>
      <option value="nugget">チキンナゲット</option>
      <option value="applepie">アップルパイ</option>
    </optgroup>
    <optgroup label="ドリンク">
      <option value="coffee">コーヒー</option>
      <option value="caffellatte">カフェラテ</option>
      <option value="cappuccino">カプチーノ</option>
    </optgroup>
  </select>
</body>

参考文献：W3C HTML5「4.10.11 The optgroup element」

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。