optionタグの使い方とドロップダウンメニューの選択肢を設定する方法をわかりやすく解説

INDEX

optionの概要

optionの概要

ドロップダウンメニューの選択肢を定義する HTMLタグ

<option value=”値”>表示テキスト</option>

概要 optionタグは、selectタグ内で個々の選択肢を定義するために使用されます。ドロップダウンメニューやリストボックスの項目として利用されます。

selectタグの中で使用され、選択肢を提供する。
value属性でフォーム送信時の値を設定できる。
selected属性でデフォルトの選択肢を指定できる。
disabled属性で選択不可にすることが可能。

optionタグの主な属性

属性	説明	使用例
`value`	フォーム送信時に送られる値	`<option value="apple">りんご</option>`
`selected`	デフォルトで選択状態にする	`<option value="banana" selected>バナナ</option>`
`disabled`	選択できない状態にする	`<option value="orange" disabled>オレンジ（選択不可）</option>`
`label`	選択肢の表示名を指定（非推奨）	`<option value="grape" label="ぶどう"></option>`

optionタグの基本的な使い方

以下の例では、selectタグの中にoptionタグを使い、ドロップダウンメニューを作成しています。

<select name="fruits">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
</select>

実行例：

optionタグの応用：デフォルト選択の設定

selected属性を使用すると、初期表示で特定の選択肢を選択状態にできます。

<select name="color">
    <option value="red">赤</option>
    <option value="blue" selected>青（初期選択）</option>
    <option value="green">緑</option>
</select>

実行例：

optionタグの応用：選択不可の設定

disabled属性を使うと、特定の選択肢を選択不可にできます。

<select name="drinks">
    <option value="coffee">コーヒー</option>
    <option value="tea" disabled>紅茶（売り切れ）</option>
    <option value="juice">ジュース</option>
</select>

実行例：

optionタグの応用：optgroupタグとの組み合わせ

optgroupタグと併用すると、選択肢をカテゴリ別に整理できます。

<select name="foods">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </optgroup>
    <optgroup label="野菜">
        <option value="carrot">にんじん</option>
        <option value="spinach">ほうれん草</option>
    </optgroup>
</select>

実行例：

注意事項

optionタグはselectタグ内でのみ使用可能。
value属性を設定しない場合、選択肢のテキストが送信される。
selected属性を使うと、デフォルトで選択状態にできる。
disabled属性を使うと、選択肢を無効化できる。
optgroupタグと組み合わせると、リストを分類できる。

よくある質問

Q: optionタグはselectタグ以外でも使用できますか？: A: いいえ、optionタグはselectタグの中でのみ使用されます。
Q: selected属性を複数のoptionタグに設定するとどうなりますか？: A: 最初に記述されたselected属性が有効になります。
Q: value属性を設定しないとどうなりますか？: A: 選択肢の表示テキストがそのまま送信されます。
Q: optgroupと組み合わせるとどんなメリットがありますか？: A: 選択肢をカテゴリ別に整理でき、ユーザーが選びやすくなります。
Q: CSSで選択肢のデザインを変更できますか？: A: はい、optionタグやselectタグにCSSを適用できます。

まとめ

optionタグは、selectタグ内の選択肢を定義する。
value属性を指定すると、送信される値を設定できる。
selected属性を使うと、デフォルトの選択肢を設定できる。
disabled属性を使うと、選択できない項目を設定できる。
optgroupタグと組み合わせると、選択肢を分類できる。