无限级联动下拉菜单-[史上兼容性最好,代码最简洁]

yanshiba 2012-04-27 01:22:07

无限级联动下拉菜单
作者:燕十八
程序特点:

兼容性强:IE6/7/8/9,ff12,chrome18,opera12,safari全部通过
代码简洁:代码不足80行
功能强大:可支持无限级下拉
效率优先:只请求一次XML文件,不经过数据库
配置简单:声明一个id就可以工作
下载:liandong.rar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>新建网页</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<script type="text/javascript">

/*

文  件: 史上最简洁,最强大,兼容性最好的无限级联动菜单

author: 燕十八

日  期: 2012-4-26 22:05

Email : yanshiba@gmail.com



鸣谢:

韩光羽,张璐,王云杰,李炳生,蒋林,徐少龙,张晓龙



感谢以上几位的认真测试



测试浏览器: IE6/7/8/9,ff12,chrome18,opera12,safari

测试结果:均已通过



版权声明:您可以自由使用本程序,但必须保留本段注释

*/



function menus() {

    var nokia = (function (){

        var tel = false;

        if(window.XMLHttpRequest){

            tel = new XMLHttpRequest();

        }else{

            tel = new window.ActiveXObject('Microsoft.XMLHTTP');

        }

        return tel;

    })();

    

    var loader = document.createElement('img');

    loader.setAttribute('src','loader.gif');

    var lian = document.getElementById('lian');    

    var xmldom =  null;



    nokia.open('GET','area.xml',false);

    nokia.onreadystatechange = function (){

            if(nokia.readyState == 4 && (nokia.status == 200 || nokia.status == 304)) {

                xmldom = nokia.responseXML;

                lian.removeChild(loader); // 删除图标

            }

    }



    lian.appendChild(loader); // 加载图标

    nokia.send(null);



    newOpt = function (v,t) {

        var opt = document.createElement('option');

        var cont = document.createTextNode(t||v);

        opt.appendChild(cont);

        opt.setAttribute('value',v);



        return opt;

    };



    newSel = function newSel(name) {

        var sel = document.createElement('select');

        sel.setAttribute('name',name);



        return sel;

    };



    var _init;

    this.init = _init = function (lev,ming) {

        // 清空后面的select

        var sons = lian.getElementsByTagName('select');            

        if(sons.length > lev) {                

            for(var i=l=sons.length;i>lev;i--) {

                lian.removeChild(sons[i-1]);

            }

        }

        

        if(ming == '') {

            return;

        }

             

        var arr = xmldom.getElementsByTagName(ming)[0].childNodes;

        

        if(arr.length == 0) {

            return;

        }

        

        

        var opt = newOpt("","请选择"+ming+'的下级地址');

        var zone = newSel('zone_'+lev);

        zone.appendChild(opt);

        for(var i=0,l=arr.length;i<l;i++) {

            //alert(arr[i]);

            zone.appendChild(newOpt(arr[i].nodeName));

        }



        zone.onchange = function () {

            _init(lev+1,this.options[this.selectedIndex].attributes.getNamedItem('value').nodeValue);

        }           

        lian.appendChild(zone);  

    }

}



window.onload = function () {new menus().init(0,'中国');};

</script>



<style type="text/css">

</style>

</head>

    <body>

        <p id="lian"></p>

    </body>

</html

...全文

524 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

zjleon2008 2012-04-28

打赏
举报

用xml就算不上简洁了

yanshiba 2012-04-28

打赏
举报

[Quote=引用 8 楼的回复:]

用xml就算不上简洁了
[/Quote]

XML只是存储形式,用数据库,或者用js数组一样得存"数据",数据是跑不掉的.

写在数据库里,则本程序会与程序相关,比如PHP,java,移植时麻烦.
写在js数组里,则修改联动数据需要改变js程序,且层次深的时间,写js的多维数组很麻烦.

能否给个更简洁的形式?

yanshiba 2012-04-27

打赏
举报

[Quote=引用 6 楼的回复:]

确实很简洁，不过提个建议，数据源中最好能够定义各选项的value值，使用xml的话，每个几点都增加一个自定义属性，比如<北京 v='BJ'></北京>，动态创建html元素时判断下，如果没有v属性的，才直接以标签的名称作为选项的值。
[/Quote]

好建议,一会加上!

乌镇程序员 2012-04-27

打赏
举报

确实很简洁，不过提个建议，数据源中最好能够定义各选项的value值，使用xml的话，每个几点都增加一个自定义属性，比如<北京 v='BJ'></北京>，动态创建html元素时判断下，如果没有v属性的，才直接以标签的名称作为选项的值。

豪情 2012-04-27

打赏
举报

给力，dtd还是strict型的。

yanshiba 2012-04-27

打赏
举报

在线演示地址:
http://yanshiba.com/code/liandong

EnForGrass 2012-04-27

打赏
举报

支持分享

yanshiba 2012-04-27

打赏
举报

接主帖:
该无限级分类用到的XML文件:

<?xml version="1.0" encoding="utf-8" ?>

<中国><北京市><北京><海淀><东北旺乡><软件园><九号楼/></软件园></东北旺乡></海淀><朝阳/></北京></北京市><安徽><淮北><濉溪/></淮北><宿州><萧县/></宿州></安徽></中国>

在线演示地址:
http://yanshiba.com/code/liandong