4個級別的下拉菜單

Question

我想要一個具有4個posiblities的選擇菜單的下拉菜單。發現了一個腳本，但這裏

http://www.javascriptkit.com/script/script2/triplecombo.shtml

更改爲這一點，但沒有工作，不知道爲什麼改變了一切，但仍然無法正常工作。搜索這裏和谷歌，但無法找到它。我想我接近

<script type="text/javascript"> 
var categories = []; 
categories["startList"] = ["FITNESS","GROEPSLESSEN"] 

categories["FITNESS"] = ["Super dal","Dal","Piek"]; 
categories["GROEPSLESSEN"] = ["Biography","Fiction","Nonfiction"]; 

categories["Super dal"] = ["1 maand","5 maand","12 maanden","12 maanden, per jaar"]; 
categories["Dal"] = ["Shirts","Ties","Belts","Hats"]; 
categories["Piek"] = ["Shirts","Ties","Belts","Hats"]; 

categories["1 maand"] = ["prijs 01","prijs 02","prijs 03","prijs 04"]; 


categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"]; 
categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"]; 
categories["Biography"] = ["Contemporay","Historical","Other"]; 
categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"]; 
categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"]; 

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 getValue(L4, L3, L2, L1) { 
alert("Uw selectie: \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4); 
} 

function init() { 
fillSelect('startList',document.forms['tripleplay']['List1']) 
} 

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);  

</script> 

<form name="tripleplay" action=""> 
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])"> 
<option selected>Kies een sport</option> 
</select> 
&nbsp; 
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])"> 
<option selected>Kies moment van de dag</option> 
</select> 
&nbsp; 
<select name='List3' onchange="getValue(this.value, this.form['List4'].value, 
this.form['List2'].value)"> 
<option selected >Tarief</option> 
</select> 
&nbsp; 
<select name='List4' onchange="getValue(this.value, this.form['List3'].value, 
this.form['List1'].value)"> 
<option selected >Tarief</option> 
</select> 
</form> 

Answer 1

它是你的代碼的解決方案：https://jsfiddle.net/nbz9atmv/

在你<select name='List3'>您必須更新<select name='List4'> IG。致電fillSelect()。 不要getValue()（它應該只在最後<select name='List4'>）。

功能fillSelect()填寫下一個<select>（與代碼的值）。 功能getValue()從<select>中獲取所有選定的值並顯示窗口警報。