このページでは、HTMLの<select>や<option>タグを使って作成するメニューについて解説します。以下の見出しから好きなセクションにジャンプできます。

• 基本的な構造
• デフォルトで選択されているオプション
• オプションのグループ化
• 動的に選択肢を変更する方法
• 複数選択可能なメニュー
• アクセシビリティ対応

基本的な構造

<select>タグを使うと、ドロップダウンメニューを作成できます。中に含まれる<option>タグが選択肢を表します。

<select name="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
</select>

上記のコードで生成されるメニュー:

Apple Banana Cherry

デフォルトで選択されているオプション

<option>タグにselected属性を付けると、デフォルトで選択される項目を指定できます。

<select name="colors">
    <option value="red" selected>Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>

上記のコードで生成されるメニュー:

Red Blue Green

オプションのグループ化

<optgroup>タグを使用して、関連する選択肢をグループ化できます。

<select name="cars">
    <optgroup label="Japanese Cars">
        <option value="toyota">Toyota</option>
        <option value="honda">Honda</option>
    </optgroup>
    <optgroup label="German Cars">
        <option value="bmw">BMW</option>
        <option value="mercedes">Mercedes</option>
    </optgroup>
</select>

上記のコードで生成されるメニュー:

Toyota Honda BMW Mercedes

動的に選択肢を変更する方法

JavaScriptを使用して、<select>メニューに選択肢を追加または削除できます。

<select id="dynamic-menu">
</select>

<script>
    const menu = document.getElementById('dynamic-menu');
    const options = ['Option 1', 'Option 2', 'Option 3'];

    options.forEach(optionText => {
        const option = document.createElement('option');
        option.textContent = optionText;
        option.value = optionText.toLowerCase().replace(' ', '-');
        menu.appendChild(option);
    });
</script>

上記のコードで生成されるメニュー:

複数選択可能なメニュー

multiple属性を使用すると、複数の選択肢を選べるメニューを作成できます。

<select name="languages" multiple>
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
    <option value="java">Java</option>
</select>

上記のコードで生成されるメニュー:

Python JavaScript Java

アクセシビリティ対応

ラベルを使用して、<select>メニューが視覚障害者にとっても使いやすいようにします。

<label for="fruit-menu">Choose a fruit:</label>
<select id="fruit-menu" name="fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
</select>

上記のコードで生成されるメニュー:

Choose a fruit: Apple Banana Cherry