javascript实现的树型下拉框

最新推荐文章于 2024-09-22 11:17:00 发布

suncheng_hong

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量925

点赞数

文章标签： javascript generator function

本文链接：https://blog.csdn.net/suncheng_hong/article/details/2972586

版权

 
 <!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> new document </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:'0',text:'北京'};
    data[2]= {id:'2',pid:'0',text:'重庆'};
    data[3]= {id:'3',pid:'2',text:'渝中区'};
    data[4]= {id:'4',pid:'3',text:'九龙坡区'};
    data[5]= {id:'5',pid:'4',text:'高新区'};
    data[6]= {id:'6',pid:'4',text:'白市驿镇'};
    data[7]= {id:'7',pid:'2',text:'江北区'};
    data[8]= {id:'8',pid:'0',text:'上海'};
    data[9]= {id:'9',pid:'0',text:'广东省'};
    data[10]= {id:'10',pid:'9',text:'广州市'};
    data[11]= {id:'11',pid:'10',text:'广州市A区'};
    data[12]= {id:'12',pid:'10',text:'广州市B区'};
    data[13]= {id:'13',pid:'-1',text:'俄罗斯'};
    data[14]= {id:'14',pid:'13',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 j= 0;j<len;j++){
          var blank ="";
          var curItem = this._data[j];
         if ( curItem.pid != this._rootid){
            intLevel =0;
            var intlvl =this.getLevel(this._data,this._rootId,curItem);
            for(a=0;a<intlvl;a++)
               blank += "..";
            blank += "├-";
         }
         if(this._item != -1){
              if (blank != "")
                 blank = ".." + blank;
               else
                 blank = "..├-";
         }
        this._item.options.add(new Option(blank +curItem.text,curItem.id));
      }
   }
   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>
 