Méthode Javascript pour afficher le menu arborescent à plusieurs niveaux dans la liste déroulante compétences javascript-js tutoriel-php.cn

Méthode Javascript pour afficher le menu arborescent à plusieurs niveaux dans la liste déroulante compétences javascript

WBOY

Libérer： 2016-05-16 15:45:38

original

1217 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'utilisation de JavaScript pour afficher un menu arborescent à plusieurs niveaux dans une liste déroulante. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de l'affichage de menus hiérarchiques dans une zone de liste déroulante. L'effet peut être vu sur de nombreux sites Web. C'est très pratique. Les options de la zone de liste déroulante utilisent JS pour contrôler la sortie. vous avez une meilleure façon, vous pouvez le faire sans JS Display, ce serait le meilleur, car il est quelque peu gênant d'implémenter un menu comme celui-ci avec JS.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.