원칙은 먼저 루트 노드를 순차적으로 로드한 다음 각 배열을 순회하여 이 루트 노드를 상위 노드로 하는 배열이 있는지 확인하는 것입니다. 그렇다면 이를 드롭다운 상자에 로드한 다음 재귀적으로 확인합니다. 이 노드가 상위 노드인 배열이 있는 경우 드롭다운 상자에 로드되는 식입니다.코드는 다음과 같습니다. <title> 자바스크립트 트리 메뉴 작성자:sclsch@188.com</title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <select id="myselect"> </select> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 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:'俄罗斯'}; data[7]= {id:'7',pid:'5',text:'孙程亮 sclsch@188.com'}; 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; } //www.jb51.net 脚本之家 ] var ts = new TreeSelector(document.getElementById("myselect"),data,-1); ts.createTree();
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
