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>获取所有选定的值并显示窗口警报。

下拉有4个级别

1 个答案: