與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選擇getValue。已刪除並更改爲this.value。如果你需要獲取值，只需使用JS調用id，如果這是你的意圖。

replace（）會拋出一個eror，但它仍然正常工作，因爲如果對上一個下拉列表（list3）進行了更改，sitll將繼續避免將多個值添加到最終下拉列表（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>