无限级联动下拉菜单-[史上兼容性最好,代码最简洁],该怎么解决-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20475 次

无限级联动下拉菜单-[史上兼容性最好,代码最简洁]
无限级联动下拉菜单
作者:燕十八
程序特点:

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

JScript code

<!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

------解决方案--------------------
thanks for sharing
------解决方案--------------------
支持分享
------解决方案--------------------
给力，dtd还是strict型的。
------解决方案--------------------

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>