在我們的項目中，假如，我們要記錄用戶的家鄉或現在所在地（包話省、市、區等），我們可能會在數據庫中建立一個地區表，然后在用戶表的相應字段中，存入地區碼，我們讀取的時候，增加了查詢次數， 還有我們前台頁面的下拉列表中要綁定所有的省、市、區等，特別是級聯的時候，我們要重執行多次查詢。那么，今天我給大家分享一個我平時使用的JS地區表的方法。先貼個圖，有圖有真像：
<html>
<head>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script src="Area.js" type="text/javascript"></script>
<script src="AreaData_min.js" type="text/javascript"></script>
<script type="text/javascript">
//初始化加載地區 如果不須要請把后三個參數改為 "0"
$(function () {
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
});
//得到地區碼
function getAreaID() {
var area = 0;
if ($("#seachdistrict").val() != "0") {
area = $("#seachdistrict").val();
}
else if ($("#seachcity").val() != "0") {
area = $("#seachcity").val();
}
else {
area = $("#seachprov").val();
}
return area;
}
function showAreaID() {
//地區碼
var areaID = getAreaID();
//地區名
var areaName = getAreaNamebyID(areaID) ;
alert("您選擇的地區碼：" + areaID + " 地區名：" + areaName);
}
//根據地區碼查詢地區名
function getAreaNamebyID(areaID) {
var areaName = "";
if (areaID.length == 2) {
areaName = area_array[areaID];
}
else if (areaID.length == 4) {
var index1 = areaID.substring(0, 2);
areaName = area_array[index1] + " " + sub_array[index1][areaID];
}
else if (areaID.length == 6) {
var index1 = areaID.substring(0, 2);
var index2 = areaID.substring(0, 4);
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
}
return areaName;
}
</script>
</head>
<body >
<select id="seachprov" name="seachprov" onchange="changeComplexProvince(this.value, sublocation_array, 'seachcity', 'seachdistrict', true);">
</select>
<select id="seachcity" name="homecity" onchange="changeCity(this.value,'seachdistrict','seachdistrict');">
</select> <span id="seachdistrict_div">
<select id="seachdistrict" name="seachdistrict">
</select></span>
<input type="button" value="獲取地區" onclick="showAreaID()"/>
</body>
</html>
在上面的DEMO中總共用到兩個JS文件（還有一個你懂的）
1：Area.js 所有的操作方法放在里面
2: AreaData_min.js 就是地區碼表
首先，我們的用戶表中家鄉字段（不管什么表，反正要存省市區的字段就OK）長度設6個字符就行（最長的只有6位吧，不知道有沒有多的），只需要存入對應省市區的地區碼就行。
下面說說地區碼(其實我們的身份證上的前6位就是地區碼，在網上那些普通查詢身份證信息的就是從這6個數字就可以知道你是哪個省市區，當然身份證號的倒數第2個吧，還可以知道男女。只有公安局的查詢系統才能真正查詢到信息的，但是那是要花錢的好像是5塊一次，哈哈，說多了):
如：”廣東省“：“44”
“廣東省深圳市”：“4403”
“廣東省深圳市羅湖區”：“440303”
全國所有的省市區地區碼我們就把它存在JS文件中，我們知道省市區都是級聯關系，我們根據這個關系再結合JS的多維數組就可以搞定了。
先插入代碼看看：
var area_array=[]; var sub_array=[]; area_array[0] = "請選擇"; area_array[11]="北京市"; sub_array[11]=[]; sub_array[11][0]="請選擇"; sub_array[11][1101]="東城區"; sub_array[11][1102]="西城區"; sub_array[11][1103]="崇文區"; sub_array[11][1104]="宣武區"; sub_array[11][1105]="朝陽區"; sub_array[11][1106]="豐台區"; sub_array[11][1107]="石景山區"; sub_array[11][1108]="海淀區"; sub_array[11][1109]="門頭溝區"; sub_array[11][1111]="房山區"; sub_array[11][1112]="通州區"; sub_array[11][1113]="順義區"; sub_array[11][1114]="昌平區"; sub_array[11][1115]="大興區"; sub_array[11][1116]="懷柔區"; sub_array[11][1117]="平谷區"; sub_array[11][1128]="密雲縣"; sub_array[11][1129]="延慶縣";
我們來說說地區碼 area.js，在文件中有三個數組，
area_array 省
sub_array 市
sub_arr 區
上面這段示例代碼中北京是直轄市所以只用到二兩個數組 假如我數據庫中存的地區碼是 “11” 那么對照地區碼肯定就是北京人了。
AreaData_min.js 這個文件中的方法呢，就有點小小復雜了，在這里就不做太多的解說，只要會調用方法就行，有興趣的朋友可以研究。
頁面加載的時候，調用這個方法initComplexArea() 存在於AreaData_min.js之中
方法里有8個參數這個都是要滴。
//初始化加載地區 如果不須要請把后三個參數改為 "0"
$(function () {
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, '44', '0', '0');
});
<select id="seachprov" name="seachprov" onchange="changeComplexProvince(this.value, sublocation_array, 'seachcity', 'seachdistrict', true);">
</select>
<select id="seachcity" name="homecity" onchange="changeCity(this.value,'seachdistrict','seachdistrict');">
</select> <span id="seachdistrict_div">
<select id="seachdistrict" name="seachdistrict">
</select></span>
第1個:省份下拉列表ID( 建議把 下拉列表的ID和name 都寫成一樣)不能為空
第2個:市下拉列表ID 不能為空
第3個:區下拉列表ID 不能為空
第4個:數組名（省） 不能為空
第5個:數組名（市) 不能為空
第6個:加載默認值（省） 不須要時寫“0”
第7個:加載默認值（市） 不須要時寫“0”(必須先有省才行)
第8個:加載默認值（區） 不須要時寫“0”(必須先有省、市才行，你懂的)
changeComplexProvince()存在於AreaData_min.js之中
changeCity() 存在於AreaData_min.js之中
這兩個方法就不多說了，照着用就行.
再來看看前台調用：
假如你的下表列表已經綁定Ok，我們在存入數據庫的時候只要在JS寫獲取相應的下拉列表的值就行
//得到地區碼
function getAreaID() {
var area = 0;
if ($("#seachdistrict").val() != "0") {
area = $("#seachdistrict").val();
}
else if ($("#seachcity").val() != "0") {
area = $("#seachcity").val();
}
else {
area = $("#seachprov").val();
}
return area;
}
這個方法就是得到你選擇的地區碼。
****再多說一個地區碼轉換到地區名的方法 例如：你傳一個“44” 返回廣東省，傳一個"4403"肯定就是廣東省深圳市 自己可以測試。
//根據地區碼查詢地區名
function getAreaNamebyID(areaID) {
var areaName = "";
if (areaID.length == 2) {
areaName = area_array[areaID];
}
else if (areaID.length == 4) {
var index1 = areaID.substring(0, 2);
areaName = area_array[index1] + " " + sub_array[index1][areaID];
}
else if (areaID.length == 6) {
var index1 = areaID.substring(0, 2);
var index2 = areaID.substring(0, 4);
areaName = area_array[index1] + " " + sub_array[index1][index2] + " " + sub_arr[index2][areaID];
}
return areaName;
}
還有一個我們在存修改的時候怎么使用呢？
簡單來說，就是在調用加載方法的時候，把默認值傳進去就Ok。當然這個須要對地區碼做一個字符串截取功能。
當地區碼為2位肯定就只有省，其它兩個就寫0. 再貼一步段代碼
var sheng = userArea.length >= 2 ? userArea.substr(0, 2) : 0;
var shi = userArea.length >= 4 ? userArea.substr(0, 4) : 0;
var qu = userArea.length >= 6 ? userArea.substr(0, 6) : 0;
initComplexArea('seachprov', 'seachcity', 'seachdistrict', area_array, sub_array, sheng, shi, qu);