首页 > 代码库 > AJAX-简单的省市县三级联动

AJAX-简单的省市县三级联动

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>

效果图

技术分享

AJAX-简单的省市县三级联动