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

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

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

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在下拉列表中显示的多级树形菜单

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

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

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

blank += "..";

blank += "├-";

this._item.options.add(new Option(blank + next.text,next.id));

for(var j=0;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

{

if( datasources[i].id == pid)

{

intLevel ++;

this.getLevel(datasources,topId,datasources[i]);

}

}

}

return intLevel;

}

var ts = new TreeSelector(document.getElementById("myselect"),data,-1);

ts.createTree();

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