jQuery表单省市区城市三级联动

html代码

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         <title>jQuery表单省市区城市三级联动</title>
 9     </head>
10 
11     <body>
12         <center>
13             <select id="seachprov" name="seachprov" onChange="changeComplexProvince(this.value, sub_array, 'seachcity', 'seachdistrict');"></select>&nbsp;&nbsp;
14             <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select>&nbsp;&nbsp;
15             <span id="seachdistrict_div"><select id="seachdistrict" name="seachdistrict"></select></span>
16 
17             <input type="button" value="获取地区" onClick="showAreaID()" />
18         </center>
19     </body>
20     <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
21     <script src="js/Area.js" type="text/javascript"></script>
　　　　//全部地名
22     <script src="js/AreaData_min.js" type="text/javascript"></script>
23     
24 </html>

js代码

 1 $(function() {
 2             initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
 3         });
 4 
 5         //得到地区码
 6         function getAreaID() {
 7             var area = 0;
 8             if($("#seachdistrict").val() != "0") {
 9                 area = $("#seachdistrict").val();
10             } else if($("#seachcity").val() != "0") {
11                 area = $("#seachcity").val();
12             } else {
13                 area = $("#seachprov").val();
14             }
15             return area;
16         }
17 
18         function showAreaID() {
19             //地区码
20             var areaID = getAreaID();
21             //地区名
22             var areaName = getAreaNamebyID(areaID);
23             alert("您选择的地区码：" + areaID + "      地区名：" + areaName);
24         }
25 
26         //根据地区码查询地区名
27         function getAreaNamebyID(areaID) {
28             var areaName = "";
29             if(areaID.length == 2) {
30                 areaName = area_array[areaID];
31             } else if(areaID.length == 4) {
32                 var index1 = areaID.substring(0, 2);
33                 areaName = area_array[index1] + " " + sub_array[index1][areaID];
34             } else if(areaID.length == 6) {
35                 var index1 = areaID.substring(0, 2);
36                 var index2 = areaID.substring(0, 4);
37                 areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
38             }
39             return areaName;
40         }

Area.js代码

  1 function initComplexArea(a, k, h, p, q, d, b, l) {
  2     var f = initComplexArea.arguments;
  3     var m = document.getElementById(a);
  4     var o = document.getElementById(k);
  5     var n = document.getElementById(h);
  6     var e = 0;
  7     var c = 0;
  8     if (p != undefined) {
  9         if (d != undefined) {
 10             d = parseInt(d);
 11         }
 12         else {
 13             d = 0;
 14         }
 15         if (b != undefined) {
 16             b = parseInt(b);
 17         }
 18         else {
 19             b = 0;
 20         }
 21         if (l != undefined) {
 22             l = parseInt(l);
 23         }
 24         else {
 25             l = 0
 26         }
 27         n[0] = new Option("请选择 ", 0);
 28         for (e = 0; e < p.length; e++) {
 29             if (p[e] == undefined) {
 30                 continue;
 31             }
 32             if (f[6]) {
 33                 if (f[6] == true) {
 34                     if (e == 0) {
 35                         continue
 36                     }
 37                 }
 38             }
 39             m[c] = new Option(p[e], e);
 40             if (d == e) {
 41                 m[c].selected = true;
 42             }
 43             c++
 44         }
 45         if (q[d] != undefined) {
 46             c = 0; for (e = 0; e < q[d].length; e++) {
 47                 if (q[d][e] == undefined) { continue }
 48                 if (f[6]) {
 49                     if ((f[6] == true) && (d != 71) && (d != 81) && (d != 82)) {
 50                         if ((e % 100) == 0) { continue }
 51                     }
 52                 } o[c] = new Option(q[d][e], e);
 53                 if (b == e) { o[c].selected = true } c++
 54             }
 55         }
 56     }
 57 }
 58 function changeComplexProvince(f, k, e, d) {
 59     var c = changeComplexProvince.arguments; var h = document.getElementById(e);
 60     var g = document.getElementById(d); var b = 0; var a = 0; removeOptions(h); f = parseInt(f);
 61     if (k[f] != undefined) {
 62         for (b = 0; b < k[f].length; b++) {
 63             if (k[f][b] == undefined) { continue }
 64             if (c[3]) { if ((c[3] == true) && (f != 71) && (f != 81) && (f != 82)) { if ((b % 100) == 0) { continue } } }
 65             h[a] = new Option(k[f][b], b); a++
 66         }
 67     }
 68     removeOptions(g); g[0] = new Option("请选择 ", 0);
 69     if (f == 11 || f == 12 || f == 31 || f == 71 || f == 50 || f == 81 || f == 82) {
 70         if ($("#" + d + "_div"))
 71         { $("#" + d + "_div").hide(); }
 72     }
 73     else {
 74         if ($("#" + d + "_div")) { $("#" + d + "_div").show(); }
 75     }
 76 }
 77 
 78  
 79 function changeCity(c, a, t) {
 80     $("#" + a).html('<option value="0" >请选择</option>');
 81     $("#" + a).unbind("change");
 82     c = parseInt(c); 
 83     var _d = sub_arr[c];
 84     var str = "";     
 85     str += "<option value='0' >请选择</option>";
 86     for (var i = c * 100; i < _d.length; i++) {
 87         if (_d[i] == undefined) continue; 
 88         str += "<option value='" + i + "' >" + _d[i] + "</option>";
 89     }
 90     $("#" + a).html(str);
 91     
 92 }
 93 
 94 function removeOptions(c) {
 95     if ((c != undefined) && (c.options != undefined)) {
 96         var a = c.options.length;
 97         for (var b = 0; b < a; b++) {
 98             c.options[0] = null;
 99         }
100     }
101 }

github地址：https://github.com/lianglixiong/javascript-note/tree/master 欢迎star