jquery - 1 番目のドロップダウン リストと 2 番目のドロップダウン リストでの項目の選択に基づいて、2 つのドロップ ダウン リストを作成する

Question

3 つのドロップダウン リスト ddl1、ddl2、および ddl3 があります。

ddl1 の項目を選択すると、ddl2 と同様に ddl3 のそれぞれの項目が入力されます。

例:- ddl1 で「インド」を選択すると、ddl2 はすべての州を表示し、ddl3 はインドのすべての都市を表示する必要があります。データベース接続なしで（ Jquery を使用して）これを行いたいと思います。助けてください！！！。ありがとう。

Answer 1

妥当な量のデータを使用している場合は、それを JavaScript オブジェクトにコーディングし、それを使用してドロップダウンに入力できます。このフィドルをチェックしてください。

var data = { 
  "India": { 
    "Cities" : ["Mumbai", "Delhi", "Bangalore"],
    "States" : ["Bihar", "Goa", "Hayana"] },
  "Japan": {
    "Cities" : ["Tokyo", "Kyoto", "Nagoya"],
    "States" : ["Miyagi", "Nara", "Tottori"] }
}

jQuery を使用して select を設定する方法は、全体的にほぼ同じになります。

$.each(data, function (key, value) {
    $('#ddl1').append($('<option>', {
        value: key
    }).text(key));
});

$('#ddl1').change(function () {
    //empty lists 2 and 3
    $('#ddl2').html("");
    $('#ddl3').html("");

    var option_selected = $('option:selected', this).val();

    //populate ddl2
    $.each(data[option_selected]['Cities'], function (index, element) {
        $('#ddl2').append($('<option>', {
            value: element
        }).text(element));
    });

    //populate ddl3
    $.each(data[option_selected]['States'], function (index, element) {
        $('#ddl3').append($('<option>', {

            value: element
        }).text(element));
    });
});