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

最新推荐文章于 2024-07-26 03:31:50 发布

iteye_10459

最新推荐文章于 2024-07-26 03:31:50 发布

阅读量160

点赞数

分类专栏：小技术小技巧文章标签： XML jQuery JavaScript IE json ViewUI

小技术小技巧专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个实现省市区三级联动选择菜单的JavaScript类。该类通过解析XML文件来动态生成下拉选项，并支持根据特定条件筛选显示的省市。示例代码展示了如何结合jQuery监听下拉列表变化并递归加载子级列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常项目当中都会用到三级联动菜单,比如省市区的选择等现将自己封装的一个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即可使用

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