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

前端技术 2023/09/04 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9046

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案