论坛首页 → Web前端技术论坛 →

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

浏览 16371 次
锁定老帖子 主题：JS +XML +Jquery 实现三级联动菜单,自己封装的一个对象方便使用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • amcucn
  • 等级: 初级会员
  • 性别:
  • 文章: 67
  • 积分: 50
  • 来自: 上海
   发表时间：2009-06-02   最后修改：2009-06-02

通常项目当中都会用到三级联动菜单,比如省市区的选择等现将自己封装的一个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
返回顶楼
         
  • 02221021
  • 等级: 二星会员
  • 性别:
  • 文章: 232
  • 积分: 210
  • 来自: 深圳
   发表时间：2009-06-03   最后修改：2009-06-03
刚看了2行代码,提2个小小建议.

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

2: this.init = function(xml, flag) {
      ....
    } 
   这些方法还是写在prototype里面吧.原型链是共用的..而楼主这样new 对象的时候会每次都为this.init创建一个副本.
返回顶楼
          回帖地址
0 请登录后投票
  • amcucn
  • 等级: 初级会员
  • 性别:
  • 文章: 67
  • 积分: 50
  • 来自: 上海
   发表时间：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当中的构造函数，不知道如何去实现，还请指点一二！
返回顶楼
          回帖地址
0 请登录后投票
  • 空砚残摹
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 深圳
   发表时间：2009-06-03  
这里areaArray作为一个私有的成员，这样写很没什么问题哦；
呵呵，我觉得可以将loadxml方法改成loaddata什么的，这样方便扩展为从其它数据源获取数据，比如json。
返回顶楼
          回帖地址
0 请登录后投票
  • amcucn
  • 等级: 初级会员
  • 性别:
  • 文章: 67
  • 积分: 50
  • 来自: 上海
   发表时间：2009-06-03  
空砚残摹 写道

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

这到是一个好主意！
返回顶楼
          回帖地址
0 请登录后投票
  • amcucn
  • 等级: 初级会员
  • 性别:
  • 文章: 67
  • 积分: 50
  • 来自: 上海
   发表时间：2009-06-05  
忘记补充了，我这里的数据不全，目前只有上海和北京有下级菜单！

其它的省市地区需要补充数据才可以！
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics