需求:选择一个城市后就可以选择对应的可供选择的区县
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
</style>
<script type="text/javascript">
function selectCity() {
//二维数组
var cities = [['选择城市'],
['海淀区','朝阳区','东城区','西城区'],
['鼓楼区','栖霞区','玄武区','秦淮区'],
['杜集区','烈山区','相山区','濉溪县'],
['瑶海区','蜀山区','庐阳区','包河区']]
//获取两个下拉菜单对象
var selectNode = document.getElementById("selectid");
var subSelectNode = document.getElementById("subselectid");
//获取选择的省的角标
var index = selectNode.selectedIndex;
//通过角标到容器中去获取对应的城市数组
var arrCities = cities[index];
//将子菜单中的内容清空
for(var i=0;i<subSelectNode.options.length;i++){
//通过父节点删除子节点
subSelectNode.removeChild(subSelectNode.options[i]);
i--;
}
//遍历城市数组,并将这个数组的元素对象封装成option对象,添加到子菜单中
for(var i=0;i<arrCities.length;i++){
var optionNode = document.createElement("option");
optionNode.innerHTML=arrCities[i];
subSelectNode.appendChild(optionNode);
}
}
</script>
</head>
<body>
<select id="selectid" onchange="selectCity()">
<option>选择省市</option>
<option>北京</option>
<option>南京</option>
<option>淮北</option>
<option>合肥</option>
</select>
<select id="subselectid">
<option>选择城市</option>
</select>
</body>
</html>