2 番目のメニューが自動入力されるカスケード ドロップダウン メニューを作成する方法

カスケード ドロップダウン メニュー: 最初の選択に基づいて 2 番目のメニューを自動入力

このシナリオでは、相互接続された 2 つのドロップダウン メニューを作成します。ここで、2 番目のメニューのオプションは、最初のメニューでの選択に基づいて動的に変化します。

初期 HTML 構造:

<code class="html"><select name="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

<select name="items">
    <!-- Options will be populated dynamically -->
</select></code>

イベント処理:

目的の機能を実現するには、最初のドロップダウンでイベント リスナーを使用して、選択が変更されたときに Ajax 呼び出しをトリガーします。

<code class="javascript"><script type="text/javascript">
    function changeItems(categoryId) {
        $.ajax({
            url: 'process.php?category=' + categoryId,
            success: function(data) {
                $("#items").html(data);
            }
        });
    }
</script></code>

Ajax の処理リクエスト:

process.php ファイルで、選択したカテゴリに基づいて 2 番目のドロップダウンのオプションを構築します。

<code class="php">$categoryId = $_GET['category'];

switch ($categoryId) {
    case 1:
        $options = array(
            'Smartphone', 'Charger'
        );
        break;
    case 2:
        $options = array(
            'Basketball', 'Volleyball'
        );
        break;
    // ...
}

foreach ($options as $option) {
    echo "<option value='$option'>$option</option>";
}</code>

2 番目のドロップダウンの動的更新:

Ajax 呼び出しは、process.php で生成された新しいオプションを #items 要素に設定します。

<code class="javascript">$("#items").html(data);</code>

データベースを使用しないカスタム実装:

データベースがない場合は、配列内の各カテゴリのオプションを手動で定義し、JavaScript を使用して 2 番目のドロップダウンを更新できます。

<code class="javascript">// Define options for each category
const categories = ['First', 'Second', 'Third', 'Fourth'];
const optionArrays = [
    ['Smartphone', 'Charger'],
    ['Basketball', 'Volleyball'],
    // ...
];

// Update second dropdown on category change
$(document).on('change', 'select[name="category"]', function() {
    const selectedCategory = $(this).val();
    const options = optionArrays[selectedCategory - 1]; // Subtract 1 to match array indices

    $('#items').empty();
    for (let i = 0; i < options.length; i++) {
        $('#items').append(`<option value="${options[i]}">${options[i]}</option>`);
    }
});</code>

以上が2 番目のメニューが自動入力されるカスケード ドロップダウン メニューを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。