javascript实现的树型下拉框改进版

来源：互联网发布：php 无法执行exec命令编辑：程序博客网时间：2024/05/24 15:36

发现上一个版本，如果数据顺序颠倒就会出现问题，现在加以改进，原理是先顺序加载根节点，在加载每个根节点后，再遍历每个数组，看有没有以这个根节点为父节点的数组，如果有，就加载到下拉框，然后再递归看有没有以这个节点为父结点的数组，如果有，再加载到下拉框，以此类推...
代码如下：

 <!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="" />
   <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;
   }
   </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>