データベースを使用せずにカスケード ドロップダウンを作成する方法

データベースを使用しないカスケード ドロップダウンの選択

問題:

フォームには 2 つのドロップダウンが必要です。 2 番目のドロップダウンは、データベースを使用せずに最初のドロップダウンでの選択に依存します。

解決策:

データベースを使用する方法にもかかわらず、データベースを使用せずにこれを実現する方法を次に示します。 1 つ:

HTML マークアップ:

<code class="html"><select id="primary-dropdown">
    <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 id="secondary-dropdown">
    <option value="0" selected>None</option>
</select></code>

JavaScript/jQuery:

<code class="javascript">$(document).ready(function() {
    var options = {
        1: ["Smartphone", "Charger"],
        2: ["Basketball", "Volleyball"],
        3: ["Apple", "Orange"],
        4: ["Dog", "Cat"]
    };

    $("#primary-dropdown").on("change", function() {
        var selected = $(this).val();
        $("#secondary-dropdown").empty();
        $.each(options[selected], function(i, option) {
            $("#secondary-dropdown").append("<option value='" + (i + 1) + "'>" + option + "</option>");
        });
    });
});</code>

説明:

• プライマリ ドロップダウン値とそれに対応するセカンダリ ドロップダウン オプションの間の関連付けを保持するために、options というオブジェクトを定義します。
• プライマリ ドロップダウン値が変更されると、セカンダリ ドロップダウンを作成し、オプション オブジェクトをループします。
• 選択したプライマリ ドロップダウン値について、対応するオプションをセカンダリ ドロップダウンに追加します。

このソリューションでは、カスケード ドロップダウンを作成せずに作成できます。データベースに依存しています。

以上がデータベースを使用せずにカスケード ドロップダウンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。