代码如下(数据信息简略表示):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script>
/*准备市的数据*/
var arr1=["顺义区","昌平区","海淀区"]; //北京 0
var arr2=["邯郸","石家庄","保定"]; //河北 1
var arr3=["济南","青岛","淄博"]; //山东 2
var arr4=["洛阳","郑州","开封"]; //河南 3
var hds=["涉县","武安","峰峰","曲周"]; //邯郸对应的县
var sjz=["长安区","桥西区","新华区","正定县"]; //石家庄对应的县
var bd=["徐水区","涿州市","高碑店市","满城区"]; //保定对应的县
var shy=["张镇镇","大孙各庄镇","北务镇","李遂镇","木林镇","北小营镇"];
var chp=["兴寿镇","马池口镇","沙河镇","回龙观镇","北七家镇","东小口镇"];
var haid=["万寿路街道办事处","永定路街道办事处","羊坊店街道办事处","甘家口街道办事处","八里庄街道办事处","中关村街道办事处"];
var jnshi=["平阴县","历下区","槐荫区","天桥区"]; //济南市对应的县
var qdshi=["市南区","黄岛区","崂山区","李沧区"]; //青岛市对应的县
var zbshi=["张店区","淄川区","博山区","周村区"]; //淄博市对应的县
var lyshi=["涧西区","西工区","洛龙区","孟津县"]; //洛阳市对应的县
var zhzhshi=["中原区","二七区","管城区","金水区"]; //郑州市对应的县
var kfshi=["鼓楼区","龙亭区","顺河区","禹王台区"]; //开封市对应的县
var bjsh = [shy,chp,haid];//北京市
var hbsh = [hds,sjz,bd];//河北省
var shdsh=[jnshi,qdshi,zbshi];//山东省
var hnsh = [lyshi,zhzhshi,kfshi];
var sh =[bjsh,hbsh,shdsh,hnsh];//省辖区的集合
/*将以上集合放到和省对应的数组中*/
var arr = [arr1, arr2, arr3, arr4];
onload = function (ev) {
document.getElementById("provinceId").onchange =function (ev2) {
var value = this.value;
var city = arr[value];
//给市的下拉框初始化
var ddd = document.getElementById("cityId");
ddd.innerHTML = "<option>‐‐请选择市‐‐</option>";
//将县的下拉框初始化
var xianId = document.getElementById("xianId");
xianId.innerHTML = "<option>‐‐请选择县‐‐</option>";
//遍历市的集合给下拉框添加内容
for (var i =0;i<city.length;i++) {
ddd.innerHTML += "<option value="+i+">"+city[i]+"</option>";
}
ddd.onchange = function (ev3) {
var v2 = this.value;
var xx = sh[value][v2];//取到对应的县的集合
xianId.innerHTML = "<option>‐‐请选择县‐‐</option>";
//遍历数组给县下拉框添加内容
for (var j=0 ;j<xx.length;j++) {
xianId.innerHTML += "<option>"+sh[value][v2][j]+"</option>";
}
}
}
}
</script>
</head>
<body>
<select id="provinceId">
<option>‐请选择‐</option>
<option value="0">北京</option>
<option value="1">河北</option>
<option value="2">山东</option>
<option value="3">河南</option>
</select>
<select id="cityId">
<option>‐‐请选择市‐‐</option>
</select>
<select id="xianId">
<option>‐‐请选择县‐‐</option>
</select>
</body>
</html>
效果图:
