<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联动</title>
<script>
//1.定义一个二维数组存储省市信息
var city = new Array(3);
city[0] = new Array("长沙市","株洲市","湘潭市","衡阳市","岳阳市","常德市","张家界市","郴州市","永州市","邵阳市","娄底市","怀化市","益阳市","湘西土家图苗族自治州");
city[1] = new Array("武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","天门市");
city[2] = new Array("黄浦区","卢湾区","徐汇区","长宁区","金山区","虹口区");
city[3] = new Array("广东市","深圳市","珠海市","清远市");
//2.将所选的省和数组中的省进行匹配
function changeCity(val) {
//6.获取下一个select节点
var selectNode = document.getElementById("cities");
// alert("111");
//8.在每次重新选择后，将第二个下拉框中的数据清除。
selectNode.length = 0;
for(var i = 0;i<city.length;i++) {
if(val == i) {
for(var j =0;j<city[i].length;j++){
//3.创建option节点
var opNode = document.createElement("option");
//4.创建文本节点
var cityNode = document.createTextNode(city[i][j]);
//5.将文本节点加入option节点中
opNode.appendChild(cityNode);
//alert(opNode.value);
//7.将option节点加入select节点中
selectNode.appendChild(opNode);
}
}
}
}
</script>
</head>
<body>
籍贯
<select onchange = "changeCity(this.value)">
<option >--请选择--</option>
<option value="0">湖南</option>
<option value="1">湖北</option>
<option value="2">上海</option>
<option value="3">广东</option>
</select>
<select id="cities">
</select>
</body>
</html>