0

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

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

例如：- 如果我在 ddl1 中选择“印度”，那么 ddl2 应该显示所有州，而 ddl3 应该显示印度国家的所有城市。我希望在没有任何数据库连接的情况下执行此操作（使用 Jquery）。请帮忙！！！。谢谢。

4

2 回答 2

2

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

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));
    });
});
于 2013-09-16T10:44:36.843 回答
0

如果没有数据库连接，那么您需要使用数组或 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 附加右侧下拉列表。

于 2013-09-16T10:14:59.393 回答