省市区三级联动 - 微笑的喵~

省市区三级联动
  1 <body onload="Provence()">
  2     <select id="provence" onchange="City()"></select>
  3     <select id="city" onchange="District()"></select>
  4     <select id="district"></select>
  5 </body>
  6 
  7     <script>
  8         /*户籍地址省份的下拉框选取方法*/
  9         function Provence() {
 10             //取得省的下拉框
 11             var pro = document.getElementById("provence");
 12             //清空省下拉框的选项，即初始化到 "---请选择省份---"这个选项
 13             pro.options.length = 0;
 14             //创建省的下拉框选项option
 15             var selp = document.createElement("option");
 16             selp.id = 0;
 17             selp.innerHTML = "--省份--";
 18             //将创建的下拉框选项添加到省的下拉框中
 19             pro.appendChild(selp);
 20 
 21             //取得市的下拉框
 22             var city = document.getElementById("city");
 23             //创建市的下拉框选项option
 24             var selc = document.createElement("option");
 25             selc.id = 0;
 26             selc.innerHTML = "--城市--";
 27             //将创建的下拉框选项添加到市的下拉框中
 28             city.appendChild(selc);
 29 
 30             var dis = document.getElementById("district");
 31             //创建区的下拉框选项option
 32             var seld = document.createElement("option");
 33             seld.id = 0;
 34             seld.innerHTML = "-区/县/-";
 35             dis.appendChild(seld);
 36 
 37             //创建省的数组
 38             var p = [];
 39             p[0] = '陕西省';
 40             p[1] = '河南省';
 41             //循环省的数组
 42             for(var i = 0; i < p.length; i++) {
 43                 selp = document.createElement("option");
 44                 selp.id = i + 1;
 45                 selp.innerHTML = p[i];
 46                 pro.appendChild(selp);
 47             }
 48         }
 49         /*户籍地址城市的下拉框选取方法*/
 50         function City() {
 51             //取得省的下拉框
 52             var pro = document.getElementById("provence");
 53             //取得市的下拉框
 54             var city = document.getElementById("city");
 55             //清空市下拉框的选项，即初始化到 "---请选择城市---"这个选项
 56             city.options.length = 0;
 57             var c = [];
 58             c[0] = '西安市，宝鸡市，咸阳市';
 59             c[1] = '郑州市，洛阳市，三门峡市，驻马店';
 60 
 61             //如果省的选项id>0，即不是 "---请选择省份---"这个选项或者说有选取的动作
 62             if(pro.selectedIndex > 0) {
 63                 //将相应选项的id-1赋给城市的选项索引（索引是从0开始的），调用split方法，将此索引的数组按照“，”分割
 64                 var x = c[pro.selectedIndex - 1].split("，");
 65                 //循环出当前省的数组对应的市的数组
 66                 for(var j = 0; j < x.length; j++) {
 67                     selc = document.createElement("option");
 68                     selc.id = j + 1;
 69                     selc.innerHTML = x[j];
 70                     //将市的选项添加到市的下拉框中
 71                     city.appendChild(selc);
 72                 }
 73                 //否则，调用Provence()方法，初始化到 "---请选择省份---"这个选项
 74             } else {
 75                 Provence();
 76             }
 77         }
 78 
 79         function District() {
 80             var pro = document.getElementById("provence");
 81             //取得市的下拉框
 82             var city = document.getElementById("city");
 83             //取得区的下拉框
 84             var dis = document.getElementById("district");
 85             var i = pro.selectedIndex;
 86             //获得城市选择的options的索引
 87             var j = city.selectedIndex;
 88             dis.options.length = 0;
 89             var d0 = [];
 90             d0[0] = '------请选择乡镇-------';
 91             var d1 = []; 
 92             d1[0] = '新城区 ,碑林区 , 莲湖区, 雁塔区,未央区';
 93             d1[1] = '渭滨区,金台区,陈仓区,眉 县,岐山县';
 94             var d2 = [];
 95             d2[0] = '秦都区,渭城区,礼泉县,武功县,泾阳县';
 96             d2[1] = '平顶山,花果山';
 97             var rs = eval('d' + i);
 98             var z = rs[j].split(",");
 99             for(var m = 0; m < z.length; m++) {
100                 var seld = document.createElement("option");
101                 seld.id = m;
102                 seld.innerHTML = z[m];
103                 dis.appendChild(seld);
104             }
105         }
106     </script>
107 
108 </html>
posted on 2017-08-09 12:29 微笑的喵~ 阅读(445) 评论(0) 编辑收藏举报