代码如下(数据信息简略表示):
<!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>
效果图: