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

我有以下问题：

我开始用HTML和JS创建一个表单，有两个下拉列表（国家和城市）。现在，我想使用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：

我知道这很简单，但我看不见树木中的树木。

它应该尽可能简单

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

jQuery（函数（$）{
变量位置={
“德国”：[“杜塞尔多夫”、“莱因费尔登·埃斯特丁根”、“埃斯伯恩”]，
“西班牙”：[“巴塞罗那”]，
“匈牙利”：[“Pecs”]，
‘美国’：[‘唐纳森林’]，
“墨西哥”：[“普埃布拉”]，
“南非”：[“米德兰”]，
“中国”：[“北京”]，
“俄罗斯”：[“圣彼得堡”]，
}
变量$locations=$（“#location”）；
$（'#country'）。更改（函数（）{
var country=$（this.val（），lcns=locations[country]| |[]；
var html=$.map（lcn，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
$locations.html（html）
});
});

---

演示：

我将提供第二个解决方案，因为这篇文章仍在Google搜索“jquery cascade select”。 这是第一个选择：

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

RM
FI

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

<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>

函数filterCity（）{
var province=$（“#province”）.find（'option:selected'）.text（）；//存储省
$（“#option container”）.children（）.appendTo（“#city”）//将包含在#option container中的内容移回其
var toMove=$（“#city”）.children（“[data-province！=”“+province+“]”）；//选择要移出的城市元素
toMove.appendTo（“#选项容器”）；//在#选项容器中移动城市元素
$（“#城市”）.removeAttr（“禁用”）；//启用选择
};

我创建了国家、州、城市和邮政编码的级联下拉列表

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

//获取html元素
var countySel=document.getElementById（“countySel”）；
var stateSel=document.getElementById（“stateSel”）；
var citySel=document.getElementById（“citySel”）；
var zipSel=document.getElementById（“zipSel”）；
//装货国
for（countryStateInfo中的var国家/地区）{
countySel.options[countySel.options.length]=新选项（国家，国家）；
}
//县变
countySel.onchange=函数（）{
stateSel.length=1；//首先删除所有选项栏
citySel.length=1；//首先删除所有选项栏
zipSel.length=1；//首先删除所有选项栏
如果（此.selectedIndex<1）
return；//完成
for（countryStateInfo[this.value]中的var状态）{
stateSel.options[stateSel.options.length]=新选项（state，state）；
}
}

我有一个方便的代码。您可以复制它：
同上
jQuery（函数（$）{
变量位置={
‘德国’：[‘杜塞尔多夫’、‘莱因费尔登·埃斯特丁根’、‘埃斯伯恩’、‘阿斯达斯达斯德’]，
“西班牙”：[“巴塞罗那”]，
“匈牙利”：[“Pecs”]，
‘美国’：[‘唐纳森林’]，
“墨西哥”：[“普埃布拉”]，
“南非”：[“米德兰”]，
“中国”：[“北京”]，
“日本”：[“东京”]，
"水洞":[水洞街,"茂名街",，
“俄罗斯”：[“圣彼得堡”]，
}
变量$locations=$（“#location”）；
$（'#country'）。更改（函数（）{
var country=$（this.val（），lcns=locations[country]| |[]；
var html=$.map（lcn，函数（lcn）{
返回“”+lcn+“”
}).加入（“”）；
$locations.html（html）
});
});
1.
国家
德国
西班牙
匈牙利
美国
墨西哥
南非
中国
日本佬
水东
俄罗斯




位置

这是我做过的一个例子。我希望这对你有用

$（文档）.ready（函数（）{
var ListNiveauCycle=[{“idNiveau”：1，“libelleNiveau”：“CL1”，“idCycle”：1}，{“idNiveau”：26，“libelleNiveau”：“Niveau 22”，“idCycle”：24}，{“idNiveau”：34，“libelleNiveau”：“CL3”，“idCycle”：1}，{“idNiveau”：35，“libelleNiveau”：“DAlf3”，“idCycle”：1}；
console.log（ListNiveauCycle）；
函数remplirListNiveau（idCycle）{
console.log（'remplirListNiveau'）；
var$niveauSelect=$（“niveau”）；
//维德拉利斯特酒店
$niveauSelect.empty（）；
对于（var i=0；i

周期
-----------
循环1
周期2
Niveau
你的小提琴与Arun P Johny的例子不一样。请注意，
map
在IE版本上不起作用<
I have a handy code. you can just copy it: 
Same as above


<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn', 'asdasdasd'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Japn': ['tokyo'],
        'Shuidong': ['shuidongjie','maomingjie'],
        '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)
    });
});
</script>
</head>
<body>1
<label class="page1">Country</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
    <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Germany</option>
        <option>Spain</option>
        <option>Hungary</option>
        <option>USA</option>
        <option>Mexico</option>
        <option>South Africa</option>
        <option>China</option>
        <option>Japn</option>
        <option>Shuidong</option>
        <option>Russia</option>

    </select>
</div>
<br />
<br />
<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
    <select id="location" name="location" placeholder="Anycity"></select>
</div>
</body>
</html>