JavaScript实现省市区的三级联动

最新推荐文章于 2023-05-24 14:43:07 发布

CH1240

最新推荐文章于 2023-05-24 14:43:07 发布

阅读量198

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ddpapa/p/10547490.html

版权

JavaScript实现省市区的三级联动

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>Insert title here</title>
  6 </head>
  7 <body>
  8 <div id="div1">
  9 </div>
 10 <script type="text/javascript">
 11     /* 创建省 */
 12     var provinceAr = ["湖北省","吉林省","湖南省"];
 13     var province = document.createElement("select");
 14     var province_one = document.createElement("option");
 15     var province_one_value = document.createTextNode("请选择省");
 16     province_one.appendChild(province_one_value);
 17     province.appendChild(province_one);
 18     document.getElementById("div1").appendChild(province);
 19     for(var i = 0; i < provinceAr.length; i++){
 20         province_one = document.createElement("option");
 21         province_one_value = document.createTextNode(provinceAr[i]);
 22         province_one.appendChild(province_one_value);
 23         province.appendChild(province_one);
 24     }
 25     /* 创建市 */
 26     var cityAr = [
 27                   ["襄阳市","武汉市","荆门市","恩施市"],
 28                   ["长春市","四平市","松原市"],
 29                   ["长沙市","岳阳市","益阳市"],
 30                   ];
 31     province.id = "proi";//给省添加id
 32     var city = document.createElement("select");
 33     document.getElementById("div1").appendChild(city);
 34     var city_one = document.createElement("option");
 35     var city_one_value = document.createTextNode("请选择市");
 36     city_one.appendChild(city_one_value);
 37     city.appendChild(city_one);
 38     city.id="cityI";//给市添加id
 39     /* 创建县 */
 40     var townAr = [
 41                 [//0
 42                      ["樊城区","襄州区","襄城区"],
 43                      ["江汉区","汉阳区","武昌区"],
 44                      ["京沙县","沙洋县","东宝区"],
 45                      ["舞阳坝街道","小渡船街道","六角亭街道"]
 46                  ],
 47                 [//1
 48                      ["南关区 ","朝阳区","宽城区"],
 49                      ["铁东区","铁西区","梨树县"],
 50                      ["宁江区","乾安县","长岭县"]
 51                  ],
 52                 [//2
 53                      ["长沙县 ","宁乡县","浏阳市"],
 54                      ["湘阴县","岳阳县","华容县"],
 55                      ["安化","桃江","南县"]
 56                  ]
 57                 ];
 58     var town = document.createElement("select");
 59     var town_one = document.createElement("option");
 60     var town_one_value = document.createTextNode("请选择县");
 61     town_one.appendChild(town_one_value);
 62     town.appendChild(town_one);
 63     document.getElementById("div1").appendChild(town);
 64     /* onchange拼写出错可能导致进程终止*/
 65     province.onchange = function(){
 66         var index = document.getElementById("proi").selectedIndex;//给select一个索引值
 67         city.innerHTML="";
 68         if(index==0){
 69             var city_one = document.createElement("option");
 70             var city_one_value = document.createTextNode("请选择市");
 71             city_one.appendChild(city_one_value);
 72             city.appendChild(city_one);
 73             town.innerHTML="";
 74             var town_one = document.createElement("option");
 75             var town_one_value = document.createTextNode("请选择县");
 76             town_one.appendChild(town_one_value);
 77             town.appendChild(town_one);
 78         }
 79         else
 80         {
 81             var cityValues = cityAr[index-1];
 82             var townValu = townAr[index-1];//townValu为一个二维数组
 83             console.log(cityValues);
 84             console.log(townValu);
 85             for(var i = 0; i < cityValues.length; i++){
 86                 var city_one = document.createElement("option");
 87                 var city_one_value = document.createTextNode(cityValues[i]);
 88                 city_one.appendChild(city_one_value);
 89                 city.appendChild(city_one);
 90             }
 91             var tor = townValu[0];
 92             console.log(tor);
 93             town.innerHTML="";
 94             for(var i = 0; i < tor.length; i++)
 95             {
 96             var town_one = document.createElement("option");
 97             var town_one_value = document.createTextNode(tor[i]);
 98             town_one.appendChild(town_one_value);
 99             town.appendChild(town_one);
100             }    
101             city.οnchange=function(){
102                 var indexc = document.getElementById("cityI").selectedIndex;
103                 var townVa = townValu[indexc];
104                 town.innerHTML="";
105                 console.log(townVa);
106                 for(var i = 0; i < townVa.length; i++)
107                 {
108                 var town_one = document.createElement("option");
109                 var town_one_value = document.createTextNode(townVa[i]);
110                 town_one.appendChild(town_one_value);
111                 town.appendChild(town_one);
112                 }    
113             }
114         }
115     }
116 </script>
117 </body>
118 </html>