案例六_2：省市级联动
程序员文章站
2023-09-28 14:54:04
``` 省市级联动 籍贯 ``` ......
<!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>