`
zzc1684
  • 浏览: 1182783 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

级联下拉列表绑定 地区JS文件

    博客分类:
  • 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"<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" 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);

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics