级联下拉列表绑定 地区JS文件
在我们的项目中，假如，我们要记录用户的家乡或现在所在地（包话省、市、区等），我们可能会在数据库中建立一个地区表，然后在用户表的相应字段中，存入地区码，我们读取的时候，增加了查询次数， 还有我们前台页面的下拉列表中要绑定所有的省、市、区等，特别是级联的时候，我们要重执行多次查询。那么，今天我给大家分享一个我平时使用的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);
浙公网安备 33010602011771号