欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript实现省市区的三级联动

程序员文章站 2022-03-11 07:53:09
参考链接： http://www.w3school.com.cn/xmldom/met_document_createelement.asp（createElement() 方法） http://www.w3school.com.cn/jsref/prop_option_index.asp（HTML ......
  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.onchange=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>

JavaScript实现省市区的三级联动JavaScript实现省市区的三级联动

参考链接：

http://www.w3school.com.cn/xmldom/met_document_createelement.asp（createelement() 方法）

http://www.w3school.com.cn/jsref/prop_option_index.asp（html dom index属性）

上一篇： python中@property和property函数使用

下一篇： css对齐方案总结

推荐阅读