javascript实现的树型下拉框改进版

更新时间：2008年09月24日 23:24:24 作者：

发现上一个版本，如果数据顺序颠倒就会出现问题，现在加以改进，

原理是先顺序加载根节点，在加载每个根节点后，再遍历每个数组，看有没有以这个根节点为父节点的数组，如果有，就加载到下拉框，然后再递归看有没有以这个节点为父结点的数组，如果有，再加载到下拉框，以此类推...
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> javascript树型菜单 author:sclsch@188.com</title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript"> var data =new Array(); data[0]= {id:'0',pid:'1',text:'河北'}; data[1]= {id:'1',pid:'-1',text:'中国'}; data[2]= {id:'2',pid:'6',text:'莫斯科'}; data[3]= {id:'3',pid:'0',text:'邯郸'}; data[4]= {id:'4',pid:'0',text:'石家庄'}; data[5]= {id:'5',pid:'3',text:'邯郸县'}; data[6]= {id:'6',pid:'-1',text:'俄罗斯'}; data[7]= {id:'7',pid:'5',text:'孙程亮 sclsch@188.com'}; function TreeSelector(item,data,rootId){ this._data = data; this._item = item; this._rootId = rootId; } TreeSelector.prototype.createTree = function(){ var len =this._data.length; for( var i= 0;i<len;i++){ if ( this._data[i].pid == this._rootId){ this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id)); for(var j=0;j<len;j++){ this.createSubOption(len,this._data[i],this._data[j]); } } } } TreeSelector.prototype.createSubOption = function(len,current,next){ var blank = ".."; if ( next.pid == current.id){ intLevel =0; var intlvl =this.getLevel(this._data,this._rootId,current); for(a=0;a<intlvl;a++) blank += ".."; blank += "├-"; this._item.options.add(new Option(blank + next.text,next.id)); for(var j=0;j<len;j++){ this.createSubOption(len,next,this._data[j]); } } } TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){ var pid =currentitem.pid; if( pid !=topId) { for(var i =0 ;i<datasources.length;i++) { if( datasources[i].id == pid) { intLevel ++; this.getLevel(datasources,topId,datasources[i]); } } } return intLevel; } //www.jb51.net 脚本之家</script> </head> <body> <select id="myselect"> </select> <script language=javascript type="text/javascript"> var ts = new TreeSelector(document.getElementById("myselect"),data,-1); ts.createTree(); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

麦鸡的TAB切换功能结合了javascript和css
麦鸡的TAB切换功能结合了javascript和css...
2007-12-12
Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
javascript实现的又一个不错的滑动导航效果
javascript实现的又一个不错的滑动导航效果...
2007-04-04
javascript仿qq界面的折叠菜单实现代码
最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,需要的朋友可以参下
2012-12-12
yahoo首页伸缩效果代码
js伸缩效果代码
2008-05-05
Js+DVML很酷漂亮实用的右键弹出菜单
Js+DVML很酷漂亮实用的右键弹出菜单...
2007-03-03
带缓冲的收缩与展开内容效果
带缓冲的收缩与展开内容效果...
2007-09-09
搜集了几个不错的下拉菜单效果
搜集了几个不错的下拉菜单效果...
2007-05-05
jquery 实现斜导航效果
jquery 实现斜导航效果代码，就一个图片文件，利用css控制位置，非常不错。
2009-05-05
msn上的tab功能Firefox对childNodes处理的一个BUG
今天公司用到一个tab功能发现 msn上的不错，但是在firefox兼容不好，msn他们的方法就是用了不少的div包含，不过网上有高人解决了。
2008-01-01