index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>ajax省市县三级联动</title>
6 </head>
7 <body>
8 <select style="width: 102px;" id="pre" onchange="changeCity(this);">
9 <option value=" ">--请选择省--</option>
10 </select>
11 <select style="width: 102px;" id="city" onchange="changeArea(this)";>
12 <option value=" ">--请选择市--</option>
13 </select>
14 <select style="width: 102px;" id="area">
15 <option value=" ">--请选择县--</option>
16 </select>
17 </body>
18 <script>
19 var pres = ["北京", "吉林", "山东"];
20
21 var cities = [
22 ["东城", "昌平", "海淀"],
23 ["长春", "吉林"],
24 ["济南", "青岛"]
25 ];
26
27 var areas = [
28 [
29 ["东城1", "东城2", "东城3"],
30 ["昌平1", "昌平2", "昌平3"],
31 ["海淀1", "海淀2", "海淀3"]
32 ],
33 [
34 ["长春1", "长春2"],
35 ["吉林1", "吉林2", "吉林3"]
36 ],
37 [
38 ["济南1", "济南2"],
39 ["青岛1", "青岛2"]
40 ]
41 ];
42 //设置一个省的公共下标
43 var pIndex = -1; //-1表示未被选中的状态
44 var preEle = document.getElementById("pre");
45 var cityEle = document.getElementById("city");
46 var areaEle = document.getElementById("area");
47 //先设置省
48 for (var i = 0; i < pres.length; i++) {
49 //创建节点: pres[i]->表示文本、 i->表示value
50 var myOption = new Option(pres[i], i);
51 //将元素添加到指定的节点(preEle放到myOption处)
52 preEle.options.add(myOption);
53 }
54 function changeCity(obj) {
55 //先清空(如果不想让cityEle、areaEle自动补全、则要将length=0->length=1)
56 cityEle.options.length = 0;
57 areaEle.options.length = 0;
58 //获取值
59 var val = obj.value;
60 //window.alert(val); //值为:0->北京、 1->吉林、2->山东
61 pIndex = obj.value; //这里先捆绑0、1、2
62 //获取cities
63 var cs = cities[val];
64 // window.alert(cs); //北京->东城,昌平,海淀
65 //获取默认区
66 var as = areas[val][0];
67
68 for (var i = 0; i < cs.length; i++) {
69 var myOption = new Option(cs[i], i);
70 cityEle.options.add(myOption);
71 }
72 for (var i = 0; i < as.length; i++) {
73 var myOption = new Option(as[i], i);
74 areaEle.options.add(myOption);
75 }
76 }
77 function changeArea(obj) {
78 var val = obj.value;
79 //window.alert(val); //吉林:0->长春、1->吉林
80 var as = areas[pIndex][val];
81 //window.alert(pIndex); //这里释放0、1、2
82 //先清空
83 areaEle.options.length = 0; //(如果不想让cityEle、areaEle自动补全、则要将length=0->length=1)
84 for (var i = 0; i < as.length; i++) {
85 var myOption = new Option(as[i], i);
86 areaEle.options.add(myOption);
87 }
88 }
89 </script>
90 </html>
效果图
时间： 2024-11-06 09:25:49