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> 14 <select id="seachcity" name="homecity" onChange="changeCity(this.value,'seachdistrict','seachdistrict');"></select> 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