关闭

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

标签: jsxmljquery
337人阅读 评论(0) 收藏 举报
分类:

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

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

2:area.js(自己写的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>
     */
}
html代码:
<pre name="code" class="html"><!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文档示例:

<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;"><span style="font-size: 14px; line-height: 25.2000007629395px;"></span></span><pre name="code" class="html"><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>




   
0
0
查看评论

Xml+JS省市县三级联动菜单

  • 2010-06-26 10:17
  • 17KB
  • 下载

jQuery实现省市县三级联动菜单

编写省市县数据,放在数组中,取名:provincesdata.js/********** 省级数据 **********/ var GP =['安徽','澳门','北京','福建','甘肃','广东',&...
  • HarderXin
  • HarderXin
  • 2012-03-03 12:56
  • 92518

原生JS省市县三级联动菜单

JS省市县三级联动菜单 body,select { font-size:9pt; font-family:Verdana; } a { color:red; text-decoration:none; ...
  • waysoflife
  • waysoflife
  • 2014-06-09 13:08
  • 5876

Jquery实现ajax三级联动

jquery下ajax的使用: $.ajax( { url:''; data:'', dataType:'', type:'', success:f...
  • xuandaijian
  • xuandaijian
  • 2016-03-17 17:36
  • 477

JQuery 现实 三级联动菜单

未选择        未选择        未选择     //加载JQuery 函数 // 创建一个数组 var info ...
  • qq_33808550
  • qq_33808550
  • 2016-10-31 21:56
  • 787

三级联动js,jQuery的实现方法

三级联动(省-市-县)      1,获取包含省-市-县的js文件:http://download.csdn.net/detail/dengxt/9657613        ...
  • dengxt
  • dengxt
  • 2016-10-19 13:55
  • 2859

jQuery+php+MySQL一张表实现三级联动菜单

初学编程,PHP+MYSQL的三级联动菜单憋了很久,终于做了出来。 PHP页面1: //初始化片区select $(function(){ $.post("1.php?type=sheng",function(data){ var str="--...
  • hongweigreat
  • hongweigreat
  • 2015-10-29 11:28
  • 1122

PHP+JS+AJAX 三级联动

1. #区域查询 $province_str = '';  //打印省 $sql = "SELECT * from area_info where SUBSTRING( `internal_code` , 3 ) = '0000'"...
  • morley_wang
  • morley_wang
  • 2012-05-17 15:55
  • 528

js中国地区三级联动下拉菜单效果分析

主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,本文将详细介绍。 因为最近有需要用到中国地区三级联动下拉菜单,虽然用公司的框架已经实现,但是看的比较迷茫,就网上找了下相关代码,主要的数据和功能实现都是在js文件中,网上找的地区数据有的地方不完整,需要自己添加,虽...
  • rongwenbin
  • rongwenbin
  • 2014-12-18 11:22
  • 1634

封装自己的js库(一)---仿照JQuery

1.index.html VQuery --> new VQuery(function(){ //相当于window.onload=function(){} // new VQuery('#btn1').click(funct...
  • yanlzhl
  • yanlzhl
  • 2017-01-06 12:14
  • 2099
    个人资料
    • 访问:102216次
    • 积分:1755
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:49篇
    • 译文:0篇
    • 评论:21条
    文章分类
    最新评论