• 基本的なドロップダウンリストの作成
• デフォルト選択を設定する
• 選択肢をグループ化する
• 複数選択可能なドロップダウン
• 選択肢を無効化する
• JavaScriptを使ったドロップダウンの操作

基本的なドロップダウンリストの作成

HTMLの<select>タグを使用すると、簡単にドロップダウンリストを作成できます。選択肢は<option>タグを使って追加します。

<label for="fruit">好きな果物を選んでください:</label>
<select id="fruit" name="fruit">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
</select>

デフォルト選択を設定する

デフォルトで選択される項目を指定するには、selected属性を使用します。

<select name="drink">
    <option value="coffee">コーヒー</option>
    <option value="tea" selected>紅茶</option>
    <option value="juice">ジュース</option>
</select>

選択肢をグループ化する

カテゴリごとに選択肢をまとめるには、<optgroup>タグを使用します。

<select name="food">
    <optgroup label="フルーツ">
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </optgroup>
    <optgroup label="野菜">
        <option value="carrot">にんじん</option>
        <option value="broccoli">ブロッコリー</option>
    </optgroup>
</select>

複数選択可能なドロップダウン

ユーザーが複数の項目を選択できるようにするには、multiple属性を追加します。

<select name="hobbies" multiple>
    <option value="reading">読書</option>
    <option value="sports">スポーツ</option>
    <option value="music">音楽鑑賞</option>
</select>

この場合、Ctrlキー（Windows）やCommandキー（Mac）を押しながらクリックすると複数選択できます。

選択肢を無効化する

特定の選択肢を選択不可にするには、disabled属性を使用します。

<select name="city">
    <option value="tokyo">東京</option>
    <option value="osaka" disabled>大阪（選択不可）</option>
    <option value="kyoto">京都</option>
</select>

JavaScriptを使ったドロップダウンの操作

JavaScriptを使って選択された値を取得したり、変更を検知することができます。

<label for="color">色を選んでください:</label>
<select id="color">
    <option value="red">赤</option>
    <option value="blue">青</option>
    <option value="green">緑</option>
</select>

<p id="output">選択した色: なし</p>

<script>
document.getElementById("color").addEventListener("change", function() {
    document.getElementById("output").innerText = "選択した色: " + this.value;
});
</script>

このコードでは、ドロップダウンリストで色を選択すると、その値がページ上に表示されます。