JavaScript实现省市区的三级联动
程序员文章站
2022-06-22 09:10:56
参考链接： 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>
参考链接：
http://www.w3school.com.cn/xmldom/met_document_createelement.asp（createelement() 方法）
http://www.w3school.com.cn/jsref/prop_option_index.asp（html dom index属性）