javascript - 具有 4 个级别相同选择的下拉菜单

Question

我在网上找到了这个修改后的脚本。

具有 4 种可能性的下拉选择菜单效果非常好。

问题出在这里。如果菜单与此处的墨西哥相同(对于墨西哥城市和墨西哥国家)，它将无法正常工作。

我该如何纠正这个问题？感谢您的帮助!

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 选择提供了 getValue 。删除并更改为 this.value。如果您需要获取该值，只需使用 JS 调用 id(如果这是您的意图)。

replace() 会抛出错误，但它仍然可以正常工作，因为如果对前一个下拉列表(列表 3)进行更改，它会继续避免将多个值添加到最终下拉列表(列表 4)中。

下面是正确运行的代码。

请告诉我这是否有帮助!

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>