Javascript多依赖下拉菜单无法正常工作

Question

我已设法操纵现有代码以制作5层多依赖下拉菜单表单，并且效果很好。唯一的问题是我需要一遍又一遍地使用相同的下拉菜单系统，最多可能有8行。

虽然下拉菜单系统看起来效果很好而且它在第一行上有效但第二行有一个小故障。当你返回一个级别到上一个下拉菜单并选择另一个选项时，而不是使用新选项重置下一个下拉菜单，它只是添加到它，你做的越多，下拉菜单越长！

这是我的代码：

在HTML标题中

<script type="text/javascript" src="5level2.js"></script> 
<script type="text/javascript" src="5level22.js"></script>

在HTML正文中

<form name="tripleplay">
<p align="center">
<select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List3' onchange="fillSelect(this.value,this.form['List4']), getValue(this.value, this.form['List2'].value, 
this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
&nbsp;
<select name='List4' onchange="fillSelect(this.value,this.form['List5']), getValue(this.value, this.form['List3'].value, 
this.form['List2'].value, this.form['List1'].value)">
<option selected >Make a selection</option>
</select>
&nbsp;
<select name='List5' onchange="getValue(this.value, this.form['List4'].value, 
this.form['List3'].value, this.form['List2'].value), this.form['List1'].value)">
<option selected >Make a selection</option>
</select> <input type="text" name="T1" size="10">
<input type="text" name="T2" size="4"></p>
<p align="center">
<select name='List6' onchange="fillSelect(this.value,this.form['List7'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List7' onchange="fillSelect(this.value,this.form['List8'])">
<option selected>Make a selection</option>
</select>
&nbsp;
<select name='List8' onchange="fillSelect(this.value,this.form['List9']), getValue(this.value, this.form['List7'].value, 
this.form['List6'].value)">
<option selected >Make a selection</option>
</select>
&nbsp;
<select name='List9' onchange="fillSelect(this.value,this.form['List10']), getValue(this.value, this.form['List8'].value, 
this.form['List7'].value, this.form['List6'].value)">
<option selected >Make a selection</option>
</select>
&nbsp;
<select name='List10' onchange="getValue(this.value, this.form['List9'].value, 
this.form['List8'].value, this.form['List7'].value), this.form['List6'].value)">
<option selected >Make a selection</option>
</select> <input type="text" name="T3" size="10">
<input type="text" name="T4" size="4"></p>
<p align="center"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>

这是5level2.js中的脚本代码

var categories = [];
categories["startList"] = ["England","Spain"]
categories["England"] = ["Premiership"];
categories["Spain"] = ["LaLiga"];
categories["Premiership"] = ["Arsenal","Chelsea"];
categories["LaLiga"] = ["Barca","Madrid"];
categories["Arsenal"] = ["Arsenal Current","Arsenal Legends"];
categories["Chelsea"] = ["Chelsea Current","Chelsea Legends"];
categories["Barca"] = ["Barca Current","Barca Legends"];
categories["Madrid"] = ["Madrid Current","Madrid Legends"];
categories["Arsenal Current"] = ["Sanchez","Ozil"];
categories["Arsenal Legends"] = ["Henry","Begkamp"];
categories["Chelsea Current"] = ["Hazard","Willian"];
categories["Chelsea Legends"] = ["Terry","Lampard"];
categories["Barca Current"] = ["Messi","Suarez"];
categories["Barca Legends"] = ["Xavi","Puyol"];
categories["Madrid Current"] = ["Ronaldo","Bale"];
categories["Madrid Legends"] = ["Figo","Zidane"];

var nLists = 5; // 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);    

这是5level22.js的脚本代码

var categories = [];
categories["startList"] = ["England","Spain"]
categories["England"] = ["Premiership"];
categories["Spain"] = ["LaLiga"];
categories["Premiership"] = ["Arsenal","Chelsea"];
categories["LaLiga"] = ["Barca","Madrid"];
categories["Arsenal"] = ["Arsenal Current","Arsenal Legends"];
categories["Chelsea"] = ["Chelsea Current","Chelsea Legends"];
categories["Barca"] = ["Barca Current","Barca Legends"];
categories["Madrid"] = ["Madrid Current","Madrid Legends"];
categories["Arsenal Current"] = ["Sanchez","Ozil"];
categories["Arsenal Legends"] = ["Henry","Begkamp"];
categories["Chelsea Current"] = ["Hazard","Willian"];
categories["Chelsea Legends"] = ["Terry","Lampard"];
categories["Barca Current"] = ["Messi","Suarez"];
categories["Barca Legends"] = ["Xavi","Puyol"];
categories["Madrid Current"] = ["Ronaldo","Bale"];
categories["Madrid Legends"] = ["Figo","Zidane"];

var nLists = 5; // 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']['List6'])
}

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

唯一不同的是带有＆＃39; startList＆＃39;的字符串。已从List1更改为List6。

我最初认为我可能在下拉菜单中有不同的选项，但可能不再需要它，所以只有一个.js文件只能处理一个变量列表。