需求:用JS实现一个下拉选单,要求在选中“地区”选单中相应的地区时,自动在“国家”选单中 出现相应的国家。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>联动菜单</title>
</head>
<body>
<p>地区:
<select id="area" οnchange="change();">
<option value="">请选择</option>
<option value="1">亚洲</option>
<option value="2">欧洲</option>
<option value="3">非洲</option>
</select>
</p>
<p>国家:
<select id="country">
<option>请选择</option>
</select>
</p>
</body>
<script type="text/javascript" src="select.js" ></script>
</html>
select.js
//假设接收到服务器传来的参数
var data = [
["中国","朝鲜","日本"],
["挪威","冰岛","葡萄牙"],
["南非","津巴布韦","乌干达"]
]
function change(){
var area = document.getElementById("area");
var countrys = document.getElementById("country");
var index = area.value;
var selects = data[index-1]; //通过选中下拉的选单value值获取数据
var oldOptions = countrys.children; //用children,数组内不会有多余属性(换行符)
var length = oldOptions.length; //!!注意,提前记录length原因:
//如果在遍历删除过程中记录length,则length值会改变,删除会出错。
for(var i=0;i<length;i++){ //删除原先选项的过程,若不删除,选项会一直堆积。
countrys.removeChild(oldOptions[0]);//一直第一个元素,因为清除第一个以后,后面的元素会前移。如果按正常的i遍历,会出错!
}
if(index==0) return; //如果选中的是"请选择",就不再添加数据,避免报错(因为脚标是-1)
for(var i=0;i<selects.length;i++){ //增加选项过程
var option = document.createElement("option");
option.innerHTML = selects[i];
country.appendChild(option);
}
}