Last active
May 24, 2016 12:25
-
-
Save poetries/4a804ff4c389f16cc2a688262d0d7067 to your computer and use it in GitHub Desktop.
文 件: 史上最简洁,最强大,兼容性最好的无限级联动菜单
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--需要新建一个xml文件area.xml--> | |
<!-- 添加修改如下数据 <?xml version="1.0" encoding="utf-8" ?> | |
<中国><北京市><北京><海淀><东北旺乡><软件园><九号楼/></软件园></东北旺乡></海淀><朝阳/></北京></北京市><安徽><淮北><濉溪/></淮北><宿州><萧县/></宿州></安徽></中国>--> | |
<!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 : [email protected] | |
鸣谢: | |
韩光羽,张璐,王云杰,李炳生,蒋林,徐少龙,张晓龙 | |
感谢以上几位的认真测试 | |
测试浏览器: 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> | |
<h2>无限级联动下拉菜单</h2> | |
<h2>作者:燕十八</h2> | |
<h3>程序特点:</h3> | |
<ol> | |
<li>兼容性强:IE6/7/8/9,ff12,chrome18,opera12,safari全部通过</li> | |
<li>代码简洁:代码不足80行</li> | |
<li>功能强大:可支持无限级下拉</li> | |
<li>效率优先:只请求一次XML文件,不经过数据库</li> | |
<li>配置简单:声明一个id就可以工作</li> | |
<li>下载:<a href="liandong.rar">liandong.rar</a></li> | |
</ol> | |
<p id="lian"></p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment