在 我们的项目中,假如,我们要记录用户的家乡或现在所在地(包话省、市、区等),我们可能会在数据库中建立一个地区表,然后在用户表的相应字段中,存入地区 码,我们读取的时候,增加了查询次数, 还有我们前台页面的下拉列表中要绑定所有的省、市、区等,特别是级联的时候,我们要重执行多次查询。那么,今天我给大家分享一个我平时使用的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"<br> $(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" οnchange="changeComplexProvince(this.value, sublocation_array, 'seachcity', 'seachdistrict', true);">
</select>
<select id="seachcity" name="homecity" οnchange="changeCity(this.value,'seachdistrict','seachdistrict');">
</select> <span id="seachdistrict_div">
<select id="seachdistrict" name="seachdistrict">
</select></span>
<input type="button" value="获取地区" οnclick="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" οnchange="changeComplexProvince(this.value, sublocation_array, 'seachcity', 'seachdistrict', true);">
</select>
<select id="seachcity" name="homecity" οnchange="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);