最近要做一個(gè)樹型下拉框，參考網(wǎng)上的資料，也沒有找到合適的，于是自己實(shí)現(xiàn)了一個(gè)，原理是先順序加載根節(jié)點(diǎn)，在加載每個(gè)根節(jié)點(diǎn)后，再遍歷每個(gè)數(shù)組，看有沒有以這個(gè)根節(jié)點(diǎn)為父
節(jié)點(diǎn)的數(shù)組，如果有，就加載到下拉框，然后再遞歸看有沒有以這個(gè)節(jié)點(diǎn)為父結(jié)點(diǎn)的數(shù)組，如果有，再加載到下拉框，以此類推...
代碼如下：（如果有更好的方法，請(qǐng)留言，有待改進(jìn)）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> javascript樹型菜單 author:sclsch@188.com</title>
5 <meta name="generator" content="editplus" />
6 <meta name="author" content="" />
7 <meta name="keywords" content="" />
8 <meta name="description" content="" />
9 <script type="text/javascript">
10 var data =new Array();
11
12 data[0]= {id:'0',pid:'1',text:'河北'};
13 data[1]= {id:'1',pid:'-1',text:'中國'};
14 data[2]= {id:'2',pid:'6',text:'莫斯科'};
15 data[3]= {id:'3',pid:'0',text:'邯鄲'};
16 data[4]= {id:'4',pid:'0',text:'石家莊'};
17 data[5]= {id:'5',pid:'3',text:'邯鄲縣'};
18 data[6]= {id:'6',pid:'-1',text:'俄羅斯'};
19 data[7]= {id:'7',pid:'5',text:'孫程亮 sclsch@188.com'};
20
21 function TreeSelector(item,data,rootId){
22 this._data = data;
23 this._item = item;
24 this._rootId = rootId;
25
26 }
27 TreeSelector.prototype.createTree = function(){
28 var len =this._data.length;
29 for( var i= 0;i<len;i++){
30 if ( this._data[i].pid == this._rootId){
31 this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id));
32 for(var j=0;j<len;j++){
33 this.createSubOption(len,this._data[i],this._data[j]);
34
35 }
36 }
37 }
38 }
39
40 TreeSelector.prototype.createSubOption = function(len,current,next){
41 var blank = "..";
42 if ( next.pid == current.id){
43 intLevel =0;
44 var intlvl =this.getLevel(this._data,this._rootId,current);
45 for(a=0;a<intlvl;a++)
46 blank += "..";
47 blank += "├-";
48 this._item.options.add(new Option(blank + next.text,next.id));
49
50 for(var j=0;j<len;j++){
51 this.createSubOption(len,next,this._data[j]);
52
53 }
54
55 }
56 }
57
58 TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){
59
60 var pid =currentitem.pid;
61 if( pid !=topId)
62 {
63 for(var i =0 ;i<datasources.length;i++)
64 {
65 if( datasources[i].id == pid)
66 {
67 intLevel ++;
68 this.getLevel(datasources,topId,datasources[i]);
69 }
70 }
71 }
72 return intLevel;
73 }
74
75 </script>
76 </head>
77
78 <body>
79 <select id="myselect">
80 </select>
81 <script language=javascript type="text/javascript">
82 var ts = new TreeSelector(document.getElementById("myselect"),data,-1);
83 ts.createTree();
84 </script>
85 </body>
86 </html>