如何用JQuery填充级联下拉菜单
我有以下问题：
我开始用HTML和JS创build一个表单，并有两个下拉菜单（国家和城市）。 现在我想用JQuery使这两个dynamic，只有选定国家的城市是可见的。
我已经开始使用一些基本的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/
我知道这很简单，但我不能看到树木。
它应该像
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) }); });
演示： 小提琴
我将提供第二个解决scheme，因为这个post仍然在谷歌search'jquery cascade select'。 这是第一个select：
<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>
这个是不可见的，并且作为所有被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>
我创build了国家，州，城市和邮编级联下拉菜单
这可能对某人有所帮助。 这里只有部分代码发布，你可以在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); } }
小提琴演示
下面是我最近写的一个包，它可以完成你所要做的以及更多： Cascading Dropdown Link 。 演示可以在这里看到
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>
