<!DOCTYPE html>
<html>
<head>
< charset=\"UTF-8\">
< >省市级联动</ >
< >
//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);
}
}
}
}
</ >
</head>
<body>
籍贯
<select = \"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>
