如何用JQuery填充级联下拉列表

Question

我有以下问题:

我开始用HTML和JS创建一个表单，有两个下拉列表（Country和City）。现在我想用JQuery使这两个动态化，以便只有所选国家的城市可见。

我已经开始了一些基本的JS，它们工作得很好，但在IE中有些麻烦。现在我正在尝试将我的JS转换为JQuery以获得更好的兼容性。

我原来的JS是这样的:

function populate(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if (s1.value == "Germany") {
        var optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
    } else if (s1.value == "Hungary") {
        var optionArray = ["|", "pecs|Pecs", "budapest|Budapest", "debrecen|Debrecen"];
    } else if (s1.value == "Russia") {
        var optionArray = ["|", "st. petersburg|St. Petersburg"];
    } else if (s1.value == "South Africa") {
        var optionArray = ["|", "midrand|Midrand"];
    } else if (s1.value == "USA") {
        var optionArray = ["|", "downers grove|Downers Grove"];
    } else if (s1.value == "Mexico") {
        var optionArray = ["|", "puebla|Puebla"];
    } else if (s1.value == "China") {
        var optionArray = ["|", "beijing|Beijing"];
    } else if (s1.value == "Spain") {
        var optionArray = ["|", "barcelona|Barcelona"];
    }

    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
};

下面是我的jQuery:

http://jsfiddle.net/hvxsz/

我知道这很简单，但我只见树木不见森林。

Answer 1

我已经为国家，州，城市和Zip创建了级联下拉列表

它可能对某人有帮助。这里只发布了部分代码，您可以在JSFiddle上看到完整的工作示例。

//Get html elements
var countySel = document.getElementById("countySel");
var stateSel = document.getElementById("stateSel"); 
var citySel = document.getElementById("citySel");
var zipSel = document.getElementById("zipSel");

//Load countries
for (var country in countryStateInfo) {
    countySel.options[countySel.options.length] = new Option(country, country);
}

//County Changed
countySel.onchange = function () {

     stateSel.length = 1; // remove all options bar first
     citySel.length = 1; // remove all options bar first
     zipSel.length = 1; // remove all options bar first

     if (this.selectedIndex < 1)
         return; // done

     for (var state in countryStateInfo[this.value]) {
         stateSel.options[stateSel.options.length] = new Option(state, state);
     }
}

小提琴演示

Answer 2

我将提供第二个解决方案，因为这篇文章仍然在谷歌搜索'jQueryCascadeSelect'中。这是第一个选择:

<select class="select" id="province" onchange="filterCity();">
  <option value="1">RM</option>
  <option value="2">FI</option>
</select>

这是第二个，在选择第一个之前禁用:

<select class="select" id="city" disabled>
  <option data-province="RM" value="1">ROMA</option>
  <option data-province="RM" value="2">ANGUILLARA SABAZIA</option>
  <option data-province="FI" value="3">FIRENZE</option>
  <option data-province="FI" value="4">PONTASSIEVE</option>
</select>

此选项是不可见的，它充当由所选内容筛选出的所有元素的容器:

<span id="option-container" style="visibility: hidden; position:absolute;"></span>

最后，筛选的脚本:

<script>

    function filterCity(){
      var province = $("#province").find('option:selected').text(); // stores province
      $("#option-container").children().appendTo("#city"); // moves <option> contained in #option-container back to their <select>
      var toMove = $("#city").children("[data-province!='"+province+"']"); // selects city elements to move out
      toMove.appendTo("#option-container"); // moves city elements in #option-container
      $("#city").removeAttr("disabled"); // enables select
};
</script>

Answer 3

应该是这么简单的

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');
        $locations.html(html)
    });
});

演示:小提琴