下拉列表有4个相同的选项

Question

我在网上发现了这个修改过的脚本。

它具有4个posiblities的下拉选择菜单非常有效。

这里的问题。 如果菜单与墨西哥相同（墨西哥城市和墨西哥国家），它将无法正常工作。

我怎么能纠正这个？ 感谢帮助！

 var categories = []; // list1 categories["startList"] = ["America","Europe"] // list2 categories["America"] = ["USA","Mexico"]; categories["Europe"] = ["France","UK"]; // list3 categories["USA"] = ["New York","Texas"];; categories["Mexico"] = ["Mexico","Guadalajara"]; categories["France"] = ["Alsace","Normandie"]; categories["UK"] = ["Wales", "Scotland", "England"]; // list4 categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"]; categories["Texas"] = ["Dallas","Eagle Pass"]; categories["Mexico"] = ["DF"]; categories["Guadalaraja"] = ["East","West"]; categories["Alsace"] = ["Strasbourg","Kronenbourg"]; categories["Normandie"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"]; categories["Wales"] = ["Cardiff", "New Port"]; categories["Scotland"] = ["Edimbourg"]; categories["England"] = ["London","Manchester","Exeter","Dover"]; var nLists = 4; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['tripleplay']['List'+i].length = 1; document.forms['tripleplay']['List'+i].selectedIndex = 0; } var nCat = categories[currCat]; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function init() { fillSelect('startList',document.forms['tripleplay']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); 

 <form name="tripleplay" action=""> <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Select One</option> </select> &nbsp; <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Select Two</option> </select> &nbsp; <select name='List3' onchange="fillSelect(this.value, this.form['List4'])"> <option selected >Select Three</option> </select> &nbsp; <select name='List4' onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Select Four</option> </select> </form> 

https://jsfiddle.net/nbz9atmv/和https://www.sitepoint.com/community/t/country-state-city-dropdown-list/2438的原始改编

Answer 1

我注意到这段代码中有一些错误。

我会说，为什么不宣布墨西哥为“墨西哥城”而不是宣布墨西哥的城市为“墨西哥”？ 根据我的理解，这是该城市正式被认可的内容，您的代码也将认识到这一点。 因此，我将“墨西哥”改为“墨西哥城”并且运作良好。 这样，您的目标受众也可以更轻松地理解您生成的代码。

我注意到的第二个错误是你在'清单4'中拼错了'瓜达拉哈拉'。

此外，你有list4 select的getValue。 删除并更改为this.value。 如果你需要获取值，只需使用JS调用id，如果这是你的意图。

replace（）将抛出一个错误但它仍然正常工作，因为如果对前一个下拉列表（list3）进行了更改，它将继续避免将多个值添加到最终下拉列表（list4）。

下面是正确运行的代码。

如果这有帮助，请告诉我！

 var categories = []; // list1 categories["startList"] = ["America","Europe"] // list2 categories["America"] = ["USA","Mexico"]; categories["Europe"] = ["France","UK"]; // list3 categories["USA"] = ["New York","Texas"];; categories["Mexico"] = ["Mexico City","Guadalajara"]; categories["France"] = ["Alsace","Normandy"]; categories["UK"] = ["Wales", "Scotland", "England"]; // list4 categories["New York"] = ["Manhattan","Brooklyn","Harlem","Queens"]; categories["Texas"] = ["Dallas","Eagle Pass"]; categories["Mexico City"] = ["DF"]; categories["Guadalajara"] = ["East","West"]; categories["Alsace"] = ["Strasbourg","Kronenbourg"]; categories["Normandy"] = ["Caen","Saint-Malo","Saint-Pierre","Saint-Jean"]; categories["Wales"] = ["Cardiff", "New Port"]; categories["Scotland"] = ["Edimbourg"]; categories["England"] = ["London","Manchester","Exeter","Dover"]; var nLists = 4; // number of select lists in the set function fillSelect(currCat,currList){ var step = Number(currList.name.replace(/\\D/g,"")); for (i=step; i<nLists+1; i++) { document.forms['tripleplay']['List'+i].length = 1; document.forms['tripleplay']['List'+i].selectedIndex = 0; } var nCat = categories[currCat]; for (each in nCat) { var nOption = document.createElement('option'); var nData = document.createTextNode(nCat[each]); nOption.setAttribute('value',nCat[each]); nOption.appendChild(nData); currList.appendChild(nOption); } } function init() { fillSelect('startList',document.forms['tripleplay']['List1']) } navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false); 

 <form name="tripleplay" action=""> <select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> <option selected>Select One</option> </select> &nbsp; <select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> <option selected>Select Two</option> </select> &nbsp; <select name='List3' onchange="fillSelect(this.value, this.form['List4'])"> <option selected >Select Three</option> </select> &nbsp; <select name='List4' onchange="fillSelect(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)"> <option selected >Select Four</option> </select> </form>