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

本文实例讲述了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程序设计有所帮助。