javascript實現的樹型下拉框改進版

2019-11-21 01:37:34

字體：大中小

來源：轉載

供稿：網友

原理是先順序加載根節點，在加載每個根節點后，再遍歷每個數組，看有沒有以這個根節點為父節點的數組，如果有，就加載到下拉框，然后再遞歸看有沒有以這個節點為父結點的數組，如果有，再加載到下拉框，以此類推...
代碼如下：

<!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> javascript樹型菜單 author:sclsch@188.com</title> <meta name="generator" content="editplus" /> <meta name="author" content="http://m.survivalescaperooms.com/"/> <meta name="keywords" content="" /> <meta name="description" content="" /> <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:'俄羅斯'}; 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; } //m.survivalescaperooms.com 武林網</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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：自己開發Dojo的建議框架

下一篇：JavaScript的學習入門整理篇第1/3頁