无限级联动下拉菜单-[史上兼容性最好,代码最简洁]
无限级联动下拉菜单
作者:燕十八
程序特点:
兼容性强: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:05Email : 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型的。
------解决方案--------------------
确实很简洁，不过提个建议，数据源中最好能够定义各选项的value值，使用xml的话，每个几点都增加一个自定义属性，比如<北京 v='BJ'></北京>，动态创建html元素时判断下，如果没有v属性的，才直接以标签的名称作为选项的值。