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

Question

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

我有以下问题：

我开始用HTML和JS创建一个表单，有两个Dropdown（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

它应该如此简单jQuery(function($)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;locations&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Germany':&nbsp;['Duesseldorf',&nbsp;'Leinfelden-Echterdingen',&nbsp;'Eschborn'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Spain':&nbsp;['Barcelona'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Hungary':&nbsp;['Pecs'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'USA':&nbsp;['Downers&nbsp;Grove'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Mexico':&nbsp;['Puebla'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'South&nbsp;Africa':&nbsp;['Midrand'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'China':&nbsp;['Beijing'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Russia':&nbsp;['St.&nbsp;Petersburg'], &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$locations&nbsp;=&nbsp;$('#location'); &nbsp;&nbsp;&nbsp;&nbsp;$('#country').change(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;country&nbsp;=&nbsp;$(this).val(),&nbsp;lcns&nbsp;=&nbsp;locations[country]&nbsp;||&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;html&nbsp;=&nbsp;$.map(lcns,&nbsp;function(lcn){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'<option&nbsp;value="'&nbsp;+&nbsp;lcn&nbsp;+&nbsp;'">'&nbsp;+&nbsp;lcn&nbsp;+&nbsp;'</option>' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}).join(''); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$locations.html(html) &nbsp;&nbsp;&nbsp;&nbsp;});});演示：小提琴

Answer 2

我为Country，State，City和Zip创建了级联下拉列表它可能对某人有帮助。这里只发布了部分代码，你可以在jsfiddle上看到完整的工作示例。//Get&nbsp;html&nbsp;elementsvar&nbsp;countySel&nbsp;=&nbsp;document.getElementById("countySel");var&nbsp;stateSel&nbsp;=&nbsp;document.getElementById("stateSel");&nbsp;var&nbsp;citySel&nbsp;=&nbsp;document.getElementById("citySel");var&nbsp;zipSel&nbsp;=&nbsp;document.getElementById("zipSel");//Load&nbsp;countriesfor&nbsp;(var&nbsp;country&nbsp;in&nbsp;countryStateInfo)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;countySel.options[countySel.options.length]&nbsp;=&nbsp;new&nbsp;Option(country,&nbsp;country);}//County&nbsp;ChangedcountySel.onchange&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stateSel.length&nbsp;=&nbsp;1;&nbsp;//&nbsp;remove&nbsp;all&nbsp;options&nbsp;bar&nbsp;first &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;citySel.length&nbsp;=&nbsp;1;&nbsp;//&nbsp;remove&nbsp;all&nbsp;options&nbsp;bar&nbsp;first &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zipSel.length&nbsp;=&nbsp;1;&nbsp;//&nbsp;remove&nbsp;all&nbsp;options&nbsp;bar&nbsp;first &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(this.selectedIndex&nbsp;<&nbsp;1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;&nbsp;//&nbsp;done &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;state&nbsp;in&nbsp;countryStateInfo[this.value])&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stateSel.options[stateSel.options.length]&nbsp;=&nbsp;new&nbsp;Option(state,&nbsp;state); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}}Fiddle Demo