Question

我有三个下拉列表ddl1，ddl2和ddl3。

现在在选择ddl1的项目时，应该填充ddl2中的相应项目以及类似的ddl3。

例如： - 如果我在ddl1中选择“India”，那么ddl2应显示所有状态，而ddl3应显示所有国家/地区的印度。我希望在没有任何数据库连接的情况下这样做（使用Jquery）。请帮忙！！！。感谢。

Answer 1

如果您正在使用合理数量的数据，则可以将其编码为javascript对象并使用它来填充下拉列表。看看这个fiddle。

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

使用jQuery填充选择的方式将大致相同。

$.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));
    });
});

Answer 2

如果没有数据库连接，则需要使用数组或json字符串或隐藏的下拉列表预填充页面上的所有可能选项。

这会使你的页面有点沉重，但无论如何你可以用javascript

countryOptions = {"Armenia", "Albania"....};

IndiaStates = {"State1", "State2"};
USAStates = {...};
/* All state dropdowns for all possible countries */

IndiaCities  = {...};
USACities  = {...};
BelgiumCities  = {...};

然后是一个函数

function populateDropdown(dropdownId, myOptions)
{
  $.each(myOptions, function(val, text) {
    $("#" + dropdownId).append(
        $('<option></option>').val(val).html(text)
    );
  });
}

还有一个changeEvent

$("#countryDropwDown").change(function(){
   if($(this).val() == "India")
   {
      populateDropdown("StateDropDown", IndiaStates);
   }
});

你这样做是为了所有国家。

更智能的解决方案是使用命名约定

XCountry，XState，XCity然后使用此约定根据前缀X附加右下拉列表。

根据第一个下拉列表和第二个下拉列表中的项目选择填充两个下拉列表

2 个答案: