optgroupタグの使い方とセレクトメニューでのグループ化をわかりやすく解説

optgroupの概要

optgroupタグの主な属性

optgroupタグの基本的な使い方

以下の例では、optgroupタグを使用して「フルーツ」と「野菜」のグループを作成し、それぞれの選択肢を整理しています。

<select name="foods">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
        <option value="orange">オレンジ</option>
    </optgroup>
    <optgroup label="野菜">
        <option value="carrot">にんじん</option>
        <option value="cabbage">キャベツ</option>
        <option value="spinach">ほうれん草</option>
    </optgroup>
</select>

実行例：

りんごバナナオレンジ
にんじんキャベツほうれん草

optgroupタグの応用：グループの無効化

disabled属性を使うと、グループ内のすべての選択肢を無効化できます。

<select name="items">
    <optgroup label="販売中">
        <option value="item1">商品1</option>
        <option value="item2">商品2</option>
    </optgroup>
    <optgroup label="売り切れ" disabled>
        <option value="item3">商品3</option>
        <option value="item4">商品4</option>
    </optgroup>
</select>

実行例：

商品1商品2
商品3商品4

注意事項

• optgroupタグはselectタグ内でのみ使用可能。
• optionタグの親要素として使用し、直接選択肢を持つことはできない。
• disabled属性を使うと、グループ全体を無効化できる。
• 見た目はブラウザによって異なるため、CSSでカスタマイズすると良い。

よくある質問

Q: optgroupタグを入れ子にできますか？

A: いいえ、optgroupタグの中にさらにoptgroupタグを入れることはできません。

Q: optgroupの背景色を変更できますか？

A: はい、CSSのbackground-colorプロパティを使用して変更できます。

Q: optgroupが不要な場合はどうすればよいですか？

A: optionタグを直接selectタグ内に配置すれば、グループ化せずにリストを作成できます。

Q: disabled属性を使うとどうなりますか？

A: そのグループのすべての選択肢が無効化され、ユーザーが選択できなくなります。

Q: optgroupのラベル部分をクリックすると選択できますか？

A: いいえ、optgroupのラベル部分自体は選択不可で、個々のoptionタグのみが選択可能です。

まとめ

• optgroupタグは、selectタグ内の選択肢をグループ化するために使用される。
• label属性を使ってグループ名を設定できる。
• disabled属性を使うとグループ全体を無効化できる。
• 見た目はCSSでカスタマイズ可能。
• 適切に使用すると、ユーザーが選択しやすいフォームを作成できる。