`
amcucn
  • 浏览: 293795 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS +XML +Jquery 实现三级联动菜单,自己封装的一个对象方便使用

XMLjQueryJavaScriptIEjson 
阅读更多

通常项目当中都会用到三级联动菜单,比如省市区的选择等现将自己封装的一个Area类拿来供大家参考一下,先看效果图:


 

使用到最主要的JS文件共两个

1:jquery.js(也可不使用,这里只是方便监听三个下拉列表,完全可以使用纯JS代替)

2:area.js(自己写的JS类)

function Area() {
    var areaArray = new Array();
    /**
     * 初始化合集,在每次new出对象后,应当调用此方法
     * @param xml   要读取的地区xml文档路径
     * @param flag  是否要读取未开通的省市,如果为空,则只读取要开通的省市,不为空,读取所有省市
     */
    this.init = function(xml, flag) {
        var doc = this.loadxml(xml);
        //获取地区集合
        var properties = doc.getElementsByTagName("a");
        var count = 0;
        for (var i = 0; i < properties.length; i++) {
            var id = properties[i].getAttribute("i");
            var name = properties[i].getAttribute("n");
            var pid = properties[i].getAttribute("p");
            //如果当前标志不为空,则代表获取所有省份与地区,否则只获取开通的省份
            if (flag != null) {
                areaArray[i] = [id,name,pid];
            } else {
                var state = properties[i].getAttribute("s");
                if (state == "true") {
                    areaArray[count] = [id,name,pid];
                    count++;
                }
            }
        }
    };
    /**
     * 发送请求,获取xml文档,兼容FF与IE,一般外部不需要调用
     * @param xml
     */
    this.loadxml = function(xml) {
        var xmlDoc;
        if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.load(xml);
        } else if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument('', '', null);
            xmlDoc.async = false;
            xmlDoc.load(xml);
        } else {
            return null;
        }

        return xmlDoc;
    };
    /**
     * 获取每一级的下一级下拉列表,如获取省级下拉列表,则pid为""
     * @param pid  父级ID,如要获取市级,则传入的PID为省份ID
     * @param selectId 如果要使下级列表自动选中某个列表,则直接传入要选中的ID ,否则设为NULL值
     */
    this.getNextOption = function(pid, selectId) {
        var options = "";
        for (var i = 0; i < areaArray.length; i++) {
            if (areaArray[i][2] == pid) {
                if (selectId != null || selectId != "") {
                    if (selectId == areaArray[i][0]) {
                        options += "<option value=" + areaArray[i][0] + " selected>" + areaArray[i][1] + "</option>";
                    } else {
                        options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
                    }
                } else {
                    options += "<option value=" + areaArray[i][0] + ">" + areaArray[i][1] + "</option>";
                }
            }
        }
        return options;
    };
    /**
     * 示例
     */
//    var area = new Area();
//    area.init("x/area.xml", null);
    //获取省份下拉列表,这里的PID为"0",是因为在XML文档当中也是0
//    var provinceOption = area.getNextOption("0", null);
    //有了此optins就可以将它追加到要添加的select对象下,然后再做事件监听,获取下一级,以此类推!
    //附上XML文档示例
    /*
     <root>
     //i当前省市ID  p 当前省市父级ID 如:0为省份  S是否开通标志
     <a i="107" n="安徽省" p="0" s="false"/>
     <a i="83" n="宝山区" p="67" s="true"/>
     <a i="93" n="北京市" p="0" s="false"/>
     <a i="103" n="北京市" p="93" s="false"/>
     <a i="77" n="长宁区" p="67" s="true"/>
     <a i="105" n="朝阳区" p="103" s="false"/>
     <a i="91" n="崇明县" p="67" s="true"/>
     <a i="89" n="奉贤区" p="67" s="true"/>
     <a i="108" n="福建省" p="0" s="false"/>
     <a i="109" n="甘肃省" p="0" s="false"/>
     <a i="110" n="广东省" p="0" s="false"/>
     <a i="101" n="广西区" p="0" s="false"/>
     <a i="111" n="贵州省" p="0" s="false"/>
     <root>
     */
}

 

这里对常用的方法进行了封装,支持IE与FF

下面是使用示例:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>三级下拉联系菜单示例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--这里导入含有area对象的外部JS文件-->
    <script type="text/javascript" src="js/area.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript">
        $(function(){
            var area = new Area();
            area.init("xml/area.xml","all");
            //初始化省份下拉列表
            $("#province").html("<option>请选择</option>"+area.getNextOption("0",null));
            //监听各个下拉列表
            $("select").change(function(){
               var value = $(this).val();
                var id =$(this).attr("id");
                var options = "<option>请选择</option>"+area.getNextOption(value,null);
               if(id=="province"){
                   $("#city").html(options);
               }else if(id == "city"){
                   $("#county").html(options);
               }
            });
        });

    </script>
</head>

<body>
<!--省份列表-->
  <select id="province"><option>请选择</option></select>
<!--市级列表-->
  <select id="city" ><option>请选择</option></select>
<!--区县列表-->
  <select id="county"><option>请选择</option></select>
</body>
</html>

 

XML文档示例:

<root>
     //i当前省市ID  p 当前省市父级ID 如:0为省份  S是否开通标志
     <a i="107" n="安徽省" p="0" s="false"/>
     <a i="83" n="宝山区" p="67" s="true"/>
     <a i="93" n="北京市" p="0" s="false"/>
     <a i="103" n="北京市" p="93" s="false"/>
     <a i="77" n="长宁区" p="67" s="true"/>
     <a i="105" n="朝阳区" p="103" s="false"/>
     <a i="91" n="崇明县" p="67" s="true"/>
     <a i="89" n="奉贤区" p="67" s="true"/>
     <a i="108" n="福建省" p="0" s="false"/>
     <a i="109" n="甘肃省" p="0" s="false"/>
     <a i="110" n="广东省" p="0" s="false"/>
     <a i="101" n="广西区" p="0" s="false"/>
     <a i="111" n="贵州省" p="0" s="false"/>
     <root>

 

最后附上,整个能运行的文件包,解压,打开其中的test.html即可使用

 

以上代码为本人自己所写,限于水平,错误之处,还请多指点.同时欢迎大家提供更好的思路与方法.

 

 

  • 大小: 19.6 KB
分享到：
| 使用JSTL标签格式化时间与货币形式
评论
7 楼 NanJiInfo 2009-09-03  
哥们儿 你这个test包我下载后运行不能实现三级联动耶  请你再仔细检查，然后从新把答案发上来  便于小弟们学习
  谢谢..
6 楼 NanJiInfo 2009-09-03  
谢谢 好东西 值得学习
5 楼 amcucn 2009-06-05  
忘记补充了，我这里的数据不全，目前只有上海和北京有下级菜单！

其它的省市地区需要补充数据才可以！
4 楼 amcucn 2009-06-03  
空砚残摹 写道

这里areaArray作为一个私有的成员，这样写很没什么问题哦；呵呵，我觉得可以将loadxml方法改成loaddata什么的，这样方便扩展为从其它数据源获取数据，比如json。

这到是一个好主意！
3 楼 空砚残摹 2009-06-03  
这里areaArray作为一个私有的成员，这样写很没什么问题哦；
呵呵，我觉得可以将loadxml方法改成loaddata什么的，这样方便扩展为从其它数据源获取数据，比如json。
2 楼 amcucn 2009-06-03  
02221021 写道

刚看了2行代码,提2个小小建议.

1:&nbsp; var areaArray = new Array();&nbsp; 写成this.areaArray也好,总之让构造函数更像构造函数一点.

2: this.init = function(xml, flag) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ....
&nbsp;&nbsp;&nbsp; }&nbsp;
&nbsp;&nbsp; 这些方法还是写在prototype里面吧.原型链是共用的..而楼主这样new 对象的时候会每次都为this.init创建一个副本.



非常感谢您的意见，不过本人水平有限，不知道如何去写prototype，另外我想实现类似于java当中的构造函数，不知道如何去实现，还请指点一二！
1 楼 02221021 2009-06-03  
刚看了2行代码,提2个小小建议.

1:  var areaArray = new Array();  写成this.areaArray也好,总之让构造函数更像构造函数一点.

2: this.init = function(xml, flag) {
      ....
    } 
   这些方法还是写在prototype里面吧.原型链是共用的..而楼主这样new 对象的时候会每次都为this.init创建一个副本.
发表评论

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

相关推荐

    jquery\xml城市三级联动

    总结起来，"jquery+xml城市三级联动"是一个基于jQuery和XML数据的交互设计实例，它演示了如何利用JavaScript库和结构化数据来创建动态的、响应式的网页组件。通过学习和实践这个项目，开发者可以提升在前端数据交互...

    .net+xml+ajax.dll实现省市县三级联动无刷新代码例子

    这个示例代码可以帮助开发者理解如何在.NET环境中结合XML和AJAX实现前后端通信，以及如何构建一个高效、无刷新的省市县三级联动功能。对于初学者来说，这是一个很好的实践案例，有助于深入理解Web开发中的异步交互和...

    jquery+ajax实现省市区三级联动 （封装和不封装两种方式）.zip

    总的来说，"jquery+ajax实现省市区三级联动"是一个涉及前端交互、异步数据获取、DOM操作、代码组织和优化等多个前端开发关键技能的项目。无论是封装还是不封装的方式，理解其背后的原理和实现细节对于提升前端开发...

    ajax实现简单城市三级联动菜单

    在城市三级联动菜单中，当用户在下拉框中选择一个城市时，我们会触发一个AJAX请求，发送当前选中的城市ID到服务器。 JSP（JavaServer Pages）作为服务器端脚本语言，用于生成动态网页内容。在本案例中，JSP将负责...

    ajax+mysql+jsp省市区三级联动显示

    在IT行业中，省市区三级联动是一种常见的前端交互功能，它常用于地址选择或者地理位置筛选等场景。本项目基于Ajax、MySQL数据库和JSP技术实现这一功能，为用户提供流畅且便捷的下拉选择体验。 首先，我们需要理解每...

    三级联动js，很好用的

    在网页开发中，"三级联动js"是一种常见的交互设计，主要应用于下拉菜单或者选择框中，例如省市区选择、商品分类筛选等场景。这种功能可以让用户在一个输入字段中逐级选择，通过前两级的选择自动加载第三级的选项，...

    二级联动、三级联动

    在本项目中，我们使用了SpringMVC作为后端框架，MyBatis作为持久层工具，通过Ajax实现前后端的异步通信，构建了一个完整的二级和三级联动功能。 首先，我们需要理解SpringMVC的工作原理。SpringMVC是一个模型-视图-...

    省市县三级联动菜单，很好的

    省市县三级联动菜单是一种常见...通过以上技术，我们可以实现一个功能完善的省市县三级联动菜单。在实际开发中，还需要结合具体项目需求，考虑如缓存策略、错误处理、国际化支持等更多细节，以提供更加完善的解决方案。

    ajax+json实现多级联动菜单

    **需求分析**：假设我们需要在一个电商网站上实现商品分类的多级联动菜单，即当用户选择一级分类时，相应的二级分类自动更新显示。 ##### 2. **设计思路**： - 客户端通过点击事件触发Ajax请求。 - 服务器端根据...

    AJAX三级联动(经典例子,自己以前项目中用过的,必须10分的资源)

    **AJAX三级联动**是一种常见的前端交互技术，主要用于实现页面数据的动态加载和更新，而无需刷新整个页面。在这个经典例子中，我们看到它被应用于一个省、市、地区的选择菜单，通过AJAX实现三个下拉框的联动效果。...

    用ajax实现的jsp三级联动

    在网页开发中，"三级联动"通常指的是在三个下拉菜单之间通过选择一个选项自动更新其他两个下拉菜单的内容。这种交互方式常用于地区选择、类别筛选等场景，为用户提供流畅的浏览体验。本示例中，我们用AJAX（异步...

    ASP.NET源码——Ajax三级联动和无刷新分页源码.zip

    在这个项目中，Ajax被用来实现三级联动，即当用户在某一级下拉菜单中选择一个选项时，下一级的下拉菜单会根据用户的选择动态加载相关数据，而无需刷新整个页面。 **三级联动**通常指的是在三个互相关联的下拉菜单或...

    jquery资料

    在jQuery中实现“三级联动”效果是一项常见的需求，通常应用于下拉菜单或者地区选择等场景。三级联动意味着三个下拉列表之间的选项相互关联，选择一个列表的选项会根据预设规则改变其他列表的可见选项。例如，选择...

    jquery素材

    在IT行业中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的使用，使得网页动态效果的实现变得简单易行。本资源"jquery素材"集合了大量的jQuery特效，是网页开发者宝贵的参考资料。 首先，让我们...

    jQuery+ajax实现无刷新级联菜单示例

    jQuery是一个快速、简洁的JavaScript库，它提供了一种简化JavaScript编程的途径，通过封装DOM操作、事件处理、动画和Ajax等功能，使得Web开发更加简单高效。在本示例中，jQuery用于处理省份下拉菜单的变更事件，通过...

    ajax+servlet两级动态级联下拉框

    本项目“ajax + servlet 两级动态级联下拉框”旨在演示如何使用AJAX（异步JavaScript和XML）技术和Servlet进行交互，以实现在选择第一个下拉框的值后，第二个下拉框自动更新并显示相关数据。以下是对这个项目的详细...

    用Struts2+Spring+Hibernate三大框架完成的级联操作

    本项目通过这三大框架实现了一个级联操作，具体涉及到了省市县以及年月日的选择，这种级联下拉菜单在实际应用中常常用于地址填写或日期选择等场景。 Struts2是基于MVC设计模式的Web框架，主要负责处理用户的请求和...

    jQuery 学习第五课 Ajax 使用说明

    jQuery是目前广泛使用的一个快速、小巧且功能丰富的JavaScript库。它通过封装JavaScript的复杂性，让开发者能够更加简单快捷地编写脚本。尤其在处理Ajax请求方面，jQuery提供了一套简便的API，极大地简化了异步HTTP...

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