javascript - 如何根据第一个选择选项显示第二个选择选项

Question

我正在尝试根据以前的下拉列表选择创建下拉列表。我已经看到了一些 JQuery 答案，但我很确定这很简单，不需要所有 JQuery 插件开销来完成，而且我没有时间学习其他语法（我知道你们中的一些人会说我没有时间不这样做，但这就是我现在所处的位置）。

到目前为止，这是我的代码：

var select = document.getElementById('division');
var dept = document.getElementById('dept').value;
var x = Array("");
var a = Array("A20", "A30", "A40", "A50");
var b = Array("B20", "B30", "B40", "B50");

function divSelect(){
	if(dept === ""){
		for(var i = 0; i< x.length; ++i) {
			select[select.length] = new Option(x[i],x[i]);
		}
	} else if(dept === "A"){
		for(var i = 0; i< a.length; ++i) {
			select[select.length] = new Option(a[i],a[i]);
		}
	} else if(dept === "B"){
		for(var i = 0; i< b.length; ++i) {
			select[select.length] = new Option(b[i],b[i]);
		}		
	}	
}

  <select id="dept" onchange='divSelect()'>
	<option value=""></option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="E">E</option>
	<option value="M">M</option>
	<option value="R">R</option>
	<option value="V">V</option>
</select>

<select id='division'>
	<option></option> 
</select>

需要有关将选择正确数组以显示在第二个选择列表中的功能的帮助。每次从第一个列表中选择一个新的“部门”时，我还想清除第二个选择列表。

以为我可以使用 select.removeAllRanges(); 就在 for 循环之前执行此操作，但我得到一个错误。

感谢大家可以提供的任何帮助。

标签： javascriptselect

Answer 1

divSelect()在函数内移动变量声明。然后，每次单击下拉菜单时，只会初始化变量。

每次选择新select.options.length = 0;的.divisiondept

function divSelect(){

var select = document.getElementById('division');
var dept = document.getElementById('dept').value;
var x = Array("");
var a = Array("A20", "A30", "A40", "A50");
var b = Array("B20", "B30", "B40", "B50");

select.options.length = 0;

	if(dept === ""){
		for(var i = 0; i< x.length; ++i) {
			select[select.length] = new Option(x[i],x[i]);
		}
	} else if(dept === "A"){
		for(var i = 0; i< a.length; ++i) {
			select[select.length] = new Option(a[i],a[i]);
		}
	} else if(dept === "B"){
		for(var i = 0; i< b.length; ++i) {
			select[select.length] = new Option(b[i],b[i]);
		}		
	}	
}

  <select id="dept" onchange='divSelect()'>
	<option value=""></option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="E">E</option>
	<option value="M">M</option>
	<option value="R">R</option>
	<option value="V">V</option>
</select>

<select id='division'>
	<option></option> 
</select>