<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:'俄罗斯'}; 
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>
<!--把下面代码加到<body>与</body>之间-->
<select id="myselect"></select> 
<script language=javascript type="text/javascript"> 
var ts = new TreeSelector(document.getElementById("myselect"),data,-1); 
ts.createTree(); 
</script> 
</body>

解决方案 »

  1.   

    <html>
    <head>
        <title>Test</title>    <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: '俄罗斯' };
            function TreeSelector(item, data, rootId, val) {
                this._data = data;
                this._item = item;
                this._rootId = rootId;
                this._val = val;
            }
            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]);
                        }
                    }
                }
                this._item.value = this._val;
            }
            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>
        <!-- 把下面代码加到<body>与</body>之间-->
        <select id="myselect">
        </select>    <script language="javascript" type="text/javascript">
            var ts = new TreeSelector(document.getElementById("myselect"), data, -1, 4);
            ts.createTree(); 
        </script></body>
    </html>