javascript实现在下拉列表中显示多级树形菜单的方法

时间：2021-05-26

本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下：

这里演示在下拉列表框中显示分级的菜单，在很多网站都可以看到的效果，很实用，下拉列表框中的选项是利用JS控制输出，如果你有更好的办法不用JS来显示，那最好了，因为像这种菜单用JS来实现，多多少少有点麻烦。

运行效果截图如下：

具体代码如下：

<!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>在下拉列表中显示的多级树形菜单</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><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:'俄罗斯'}; 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; } </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>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章