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

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

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

 

 

分享到：
| BigInteger权限判断示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    级联下拉列表工具类，js实现

    ### 级联下拉列表工具类：JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式，特别是在处理多层级数据时，它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...

    jquery简单实现级联下拉列表

    本文将详细解析如何使用jQuery来实现级联下拉列表，这是一种常见的Web前端功能，常用于数据关联选择场景，如地区选择（省市区）、分类选择等。 ### 核心概念：级联下拉列表 级联下拉列表是指当用户在一个下拉列表...

    Ajax级联下拉列表.rar

    在本示例中，"Ajax级联下拉列表.rar"是一个关于如何使用Java技术和Ajax实现级联下拉列表的小功能的压缩包。 级联下拉列表是一种常见的前端交互设计，用户在一个下拉列表中做出选择后，第二个或更多的下拉列表会根据...

    JavaScript动态级联下拉列表框

    JavaScript动态级联下拉列表框是一种常见的前端交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用，能够提高用户体验，减少不必...

    ajax实现级联下拉列表代码

    在提供的"ajax实现的级联下拉列表代码.txt"文件中，应该包含了实现上述过程的具体JavaScript代码。这个文件可能包含了一个或多个函数，用于初始化下拉列表、绑定事件监听器、构建AJAX请求、解析响应数据以及更新DOM...

    jQuery 级联下拉列表

    在网页开发中，级联下拉列表是一种常见的交互设计，常用于实现省市区选择、类别筛选等场景。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，同时也提供了丰富的插件来扩展功能。在这个...

    jQuery实现的多级级联下拉列表

    本教程将深入探讨如何使用jQuery这一强大的JavaScript库来实现多级级联下拉列表。 首先，我们需要理解jQuery的核心概念。jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...

    可编辑的级联下拉列表框

    在实现可编辑级联下拉列表框时，JQuery可以用来绑定事件、获取和设置DOM元素的状态，以及创建动态的UI效果。例如，我们可以使用JQuery的`$(element).on('change', function() {...})`来监听下拉框的改变事件，然后在...

    级联下拉列表例子（ajax和jquery）&prototype1;.7&jquery;_jar

    级联下拉列表是一种常见的网页交互元素，常用于如地区选择、分类筛选等场景，它允许用户在选择一个选项后，下一个下拉列表会根据前一个选择动态更新其选项。在这个例子中，我们关注的是使用AJAX和jQuery来实现这种...

    级联下拉列表

    级联下拉列表是一种常见的用户界面元素，常用于在网页或应用程序中展示相互关联的数据选择。这种设计允许用户从一个下拉菜单中选择一个选项，然后根据所选的选项动态更新另一个下拉菜单的内容。这样的交互方式提高了...

    级联下拉菜单

    在级联下拉菜单的实现中，.ashx文件将作为服务器端的数据提供者，接收Ajax请求，处理业务逻辑，然后以Json格式返回关联数据。 Ajax，即异步JavaScript和XML，是实现网页无刷新更新的关键技术。在级联下拉菜单中，当...

    JQuery写的日期级联下拉菜单

    这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件，允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期，同时保持页面的简洁性...

    ajax+struts2.0+jsp下拉列表级联

    在Web开发中，级联下拉列表是一种常见的交互方式，它允许用户在选择一个选项后，根据选择自动更新另一个下拉列表。在这个“ajax+struts2.0+jsp下拉列表级联”的示例中，我们将探讨如何利用这三个技术实现这种功能。 ...

    EasyUI学习之Combobox级联下拉列表(2)

    总结来说，EasyUI的Combobox级联下拉列表实现的关键在于JavaScript的事件监听和数据加载。通过AJAX请求获取数据，结合EasyUI的Combobox组件特性，我们可以创建出灵活且互动的级联选择界面，这对于多层分类或层次化...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...

    AngularJS实现三级级联下拉选择框

    在本文中，我们将深入探讨如何使用AngularJS实现三级级联下拉选择框。AngularJS，一个由Google维护的JavaScript框架，被广泛用于构建单页应用（SPA），它提供了丰富的功能来处理复杂的前端交互，包括数据绑定、依赖...

    js javascript 网页地区邮政编码选择级联菜单

    在网页设计中，为了提供用户友好的体验，经常会用到级联下拉菜单（Cascading Dropdown Menu）来实现各种筛选或选择功能。本话题主要关注如何使用JavaScript（简称JS）来创建一个地区与邮政编码相结合的级联选择菜单...

Magicbox
Global site tag (gtag.js) - Google Analytics