自定义下拉框类型source（树型）

  var imagePath = "";
  var barImg, spacerImg, rootImg;
  var teeImg, teePlusImg,teeMinusImg;
  var cornerImg, cornerPlusImg, cornerMinusImg;
  var folderImg, folderOpenImg, leafImg;

  imgAlign = ' align="absMiddle"';

/**
 * 构造函数，新建一个树节点
 */
function Folder(nodecode,description,parentId){
   this.code = nodecode;
   this.desc = description;
   this.parentId = parentId;
   if (parentId == null){
       this.layer = 1;
   }
}

function setImagePath(){
   barImg = imagePath+"images/menu_bar.gif";
   teeImg = imagePath+"images/menu_tee.gif";
   cornerImg = imagePath+"images/menu_corner.gif";
   spacerImg = imagePath+"images/menu_spacer.gif";
   rootImg = imagePath+"images/menu_root.gif";
   teePlusImg = imagePath+"images/menu_tee_plus.gif";
   teeMinusImg = imagePath+"images/menu_tee_minus.gif";
   cornerPlusImg = imagePath+"images/menu_corner_plus.gif";
   cornerMinusImg = imagePath+"images/menu_corner_minus.gif";
   folderImg = imagePath+"images/folder.gif";
   folderOpenImg = imagePath+"images/folder_open.gif";
   leafImg = imagePath+"images/file.gif";
}
function setColor(nodeCode){
   document.getElementById("fld_text_"+nodeCode).style.color = "#FF0000";
   if (document.getElementById("fld_text_"+preNodeCode) && nodeCode!=preNodeCode){
      document.getElementById("fld_text_"+preNodeCode).style.color = "#221133"; 
   }
   preNodeCode = nodeCode;
}

/**
 * 初始化打开一个节点
 */
function expandFolder(nodeCode, dropDown){
   var folder = getFolderByCode(nodeCode, dropDown);
   if (folder == null)   return;
   var ancestors = folder.getAncestors(dropDown);
   for (var i=0; i<ancestors.length; i++){
       ancestors[i].show(dropDown);
   }
   folder.clickNode(nodeCode, dropDown)
}
/**
 * 默认实现，点击节点名称
 */
function clickNode(nodeCode, dropDown){
   clickFolder(nodeCode, dropDown);
   setColor(nodeCode);
}
/**
 * 点击“文件夹”图片
 */
function clickFolder(nodeCode, dropDown){
   var folder = getFolderByCode(nodeCode, dropDown);
   if (folder.isOpen){
      hiddenFolder(folder, dropDown);
   }else{
      showFolder(folder, dropDown);
   }
}

Folder.prototype={
    draw : function(dropDown){
        var fathers = this.getAncestors(dropDown);
        var content = '';
        for (var i=fathers.length; i>0; i--){
            if (fathers[i-1].hasBrothers(dropDown)){
               content += '<img src="'+barImg+'" '+imgAlign+'>';
            }else{
               content += '<img src="'+spacerImg+'" '+imgAlign+'>';
            }
        }
        content += '<img id="nav_img_'+this.code+'" '+imgAlign+' src="';
        if (this.isLeafNode(dropDown)){
           if (this.hasBrothers(dropDown)){
              content += teeImg;
           }else{
              content += cornerImg;
           }
        }else{
           if (this.hasBrothers(dropDown)){
              content += teePlusImg;
           }else{
              content += cornerPlusImg;
           }
        }
        content += '" style="cursor:hand" border="0">';
        if (dropDown.multiple){
            content += '<input type="checkbox" name="menuCode" id="fld_chkbox_'+this.code+'" value="'+this.code+'" style="height:16px">';
        }
        content += '<span id="fld_text_'+this.code+'" style="cursor:hand">' + this.desc+'</span>';
        var elt = new Element("div", {id:"folder_"+this.code,"class":"treeNode"}).update(content);
        elt.setAttribute("noWrap","true");
        return elt;
    },
    hide : function(dropDown){
        this.isOpen = false;
        if (this.isLeafNode(dropDown)){
           return;
        }
        var object = document.getElementById("nav_img_"+this.code);
        if (this.hasBrothers(dropDown)){
            object.src = teePlusImg;
        }else{
            object.src = cornerPlusImg;
        }
        object = document.getElementById("fld_img_"+this.code);
        if (object){
            object.src = folderImg;
        }
        var grandson = this.getDescendants(dropDown);
        for (var i=0; i<grandson.length; i++){
            document.getElementById("folder_"+grandson[i].code).style.display = "none";
            grandson[i].isOpen = false;
            grandson[i].hide(dropDown);
        }
    },
    show : function(dropDown){
        this.isOpen = true;//alert(this.code+"show:"+this.isLeafNode(dropDown));
        if (this.isLeafNode(dropDown)){
            return;
        }
        var object = document.getElementById("nav_img_"+this.code);
        if (this.hasBrothers(dropDown)){
            object.src = teeMinusImg;
        }else{
            object.src = cornerMinusImg;
        }
        object = document.getElementById("fld_img_"+this.code);
        if (object){
            object.src = folderOpenImg;
        }
        var children = this.getChildren(dropDown);
        for (var i=0; i<children.length; i++){
            document.getElementById("folder_"+children[i].code).style.display = "block";
            object = document.getElementById("nav_img_"+children[i].code);
            if (children[i].isLeafNode(dropDown)){
                if (children[i].hasBrothers(dropDown)){
                   object.src = teeImg;
                }else{
                   object.src = cornerImg;
               }
            }else{
               if (children[i].hasBrothers(dropDown)){
                  object.src = teePlusImg;
               }else{
                  object.src = cornerPlusImg;
               }
            }
        }
     },
     getParent : function(dropDown){
        if (!dropDown.frozen){
            Dropdown_Tree.frozen(dropDown);
        }
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].code == this.parentId){
                return dropDown.options[i];
            }else if (dropDown.options[i].layer > this.layer+1){
                break;
            }
        }
        return null;
    },
    getAncestors : function(dropDown){
        var ancestors = new Array();
        var parent = this.getParent(dropDown);
        while (parent != null){
            ancestors.push(parent);
            parent = parent.getParent(dropDown);
        }
        return ancestors;
    },
    getChildren : function(dropDown){
        if (!dropDown.frozen){
            Dropdown_Tree.frozen(dropDown);
        }
        var children = new Array();
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].parentId == this.code){
                dropDown.options[i].layer = this.layer + 1;
                children.push(dropDown.options[i]);
            }else if (dropDown.options[i].layer > this.layer+1){
                break;
            }
        }
        return children;
    },
    getDescendants : function(dropDown){
        var descendants = new Array();
        var children = this.getChildren(dropDown);
        for (var i=0,len=children.length; i<len; i++){
            descendants.push(children[i]);
            descendants = descendants.concat(children[i].getDescendants(dropDown));
        }
        return descendants;
    },
    getBrothers : function(dropDown){
        if (!dropDown.frozen){
            Dropdown_Tree.frozen(dropDown);
        }
        var brothers = new Array();
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].parentId==this.parentId && dropDown.options[i]!=this){
                children.push(dropDown.options[i]);
            }else if (dropDown.options[i].layer > this.layer+1){
                break;
            }
        }
        return brothers;
    },
    hasBrothers : function(dropDown){
        if (!dropDown.frozen){
            Dropdown_Tree.frozen(dropDown);
        }
        var foundSelf = false;
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].parentId == this.parentId){
                if (dropDown.options[i].code == this.code){
                    foundSelf = true;
                }else if (foundSelf){
                    return true;
                }
            }else if (dropDown.options[i].layer > this.layer+1){
                break;
            }
        }
        return false;
    },
    isLeafNode : function(dropDown){
        if (!dropDown.frozen){
            Dropdown_Tree.frozen(dropDown);
        }
        for (var i=dropDown.options.length-1; i>=0; i--){
            if (dropDown.options[i].parentId == this.code){
               return false;
            }else if (dropDown.options[i].layer < this.layer){
                break;
            }
        }
        return true;
    },
    selectNode : function (dropDown){
        this.show(dropDown);
        var obj = document.getElementById("fld_chkbox_"+this.code);
        if (chkboxOperate > 0){
           var array = this.getDescendants(dropDown);
           for (i=0;i<array.length;i++){
               document.getElementById("fld_chkbox_"+array[i].code).checked = obj.checked;
           }
        }
        if (chkboxOperate==-1 || chkboxOperate==2){
           var array1 = this.getAncestors(dropDown);
           if (obj.checked){
               for (i=0; i<array1.length; i++){
                   document.getElementById("fld_chkbox_"+array1[i].code).checked = obj.checked;
               }
           }
        }
    }
}

/**选中Checkbox是否关联级联的节点
 * 0: 默认不关联，只选中自身
 * 1: 自动选中children
 * -1: 选中grand-parent
 * 2: 选中grand and children
 */
var chkboxOperate = 0;
function setChkboxOperate(operate){
   chkboxOperate = operate;
}

 

var Dropdown_Tree={
    /**protected**/
    getShowStr : function(dropDown){
        if (!dropDown.drawed){
            dropDown.drawed = true;
            this.drawTree(dropDown);
        }
        for (var i=0,len=dropDown.options.length; i<len; i++){
            var folderCode = dropDown.options[i].code;
            $("nav_img_"+folderCode).observe("click",function(event){
                var code = event.srcElement.id;
                code = code.substring("nav_img_".length, code.length);
                var folder = Dropdown_Tree.getFolderByCode(code, dropDown);
                if (folder.isOpen){
                    folder.hide(dropDown);
                }else{
                    folder.show(dropDown);
                }
                event.cancelBubble=true;
            });
            if (dropDown.multiple){
                $("fld_chkbox_"+folderCode).observe("click",function(event){
                    var code = event.srcElement.id;
                    code = code.substring("fld_chkbox_".length, code.length);
                    var folder = Dropdown_Tree.getFolderByCode(code, dropDown);
                    folder.selectNode(dropDown);
                    event.cancelBubble=true;
                });
            }
            $("fld_text_"+folderCode).observe("click",function(event){
                var code = event.srcElement.id;
                code = code.substring("fld_text_".length, code.length);
                var folder = Dropdown_Tree.getFolderByCode(code, dropDown);
                if (folder.isOpen){
                    folder.hide(dropDown);
                }else{
                    folder.show(dropDown);
                }
                Dropdown_Tree.selectItemOK(this, dropDown);
            });
        }
    },
    /**protected**/
    initSelectedItem : function(dropDown){
        var value_ = dropDown.valueObj.value;
        if (dropDown.multiple){
            value_ = value_.split("|");
            for (var i=0,len=value_.length; i<len; i++){
                var chkbox = $("fld_chkbox_"+value_[i]);
                if (chkbox != null){
                    chkbox.checked = true;
                }
            }
        }else{
            var textObj = $("fld_text_"+value_);
            if (textObj != null){
                textObj.setStyle({color:"#FF0000"});
            }
        }
    },
    drawTree : function(dropDown){
        setImagePath();
        if (dropDown.rootName){
            var content = '<img id="fldImgRoot" align="absMiddle" src="'+rootImg+'">'+ dropDown.rootName;
            var root = new Element("div", "tree_root_"+dropDown.loader).update(content);
            root.setStyle({cursor:'hand',fontSize:'15px'});
            dropDown.dispObj.appendChild(root);
        }
        var folders = this.getTopFolders(dropDown);
        for (var i=0,len=folders.length; i<len; i++){
            dropDown.dispObj.appendChild(folders[i].draw(dropDown));
            document.getElementById("folder_"+folders[i].code).style.display = "block";
            var descendants = folders[i].getDescendants(dropDown);
            for (var j=0,size=descendants.length; j<size; j++){
                dropDown.dispObj.appendChild(descendants[j].draw(dropDown));
            }
        }
    },
    selectItemOK : function(textObj, dropDown){
        var value = "", text = "";
        if (dropDown.multiple){
            var chkbox = textObj.previousSibling;
            chkbox.checked = !chkbox.checked;
            var children = dropDown.dispObj.childNodes;
            var folderChildren;
            for (var i=0,len=children.length; i<len; i++){
                folderChildren = children[i].childNodes;
                if (folderChildren[folderChildren.length-2].checked){
                    value += folderChildren[folderChildren.length-2].value + "|";
                    text += folderChildren[folderChildren.length-1].innerText + "|";
                }
            }
            if (value != ""){
                value = value.substring(0, value.length-1);
                text = text.substring(0, text.length-1);
            }
            dropDown.valueObj.value = value;
            dropDown.srcObj.value = text;
            cancelBubble(event);
        }else{
            var preTextObj = $("fld_text_"+dropDown.valueObj.value);
            if (preTextObj != null){
                preTextObj.setStyle({color:"#000000"});
            }
            text = textObj.innerText;
            value = textObj.id.substring("fld_text_".length, textObj.id.length);
            dropDown.srcObj.value = text;
            dropDown.valueObj.value = value;
        }
    },

    addItem : function(code,text,parentId,dropDown){
        var folder = new Folder(code,text,parentId);
        dropDown.options.push(folder);
    },
    frozen : function(dropDown){
        var temp = this.getTopFolders(dropDown);
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].layer == undefined){
                var parentId = dropDown.options[i].parentId;
                for (var j=0; j<temp.length; j++){
                    if (temp[j].code == parentId){
                        dropDown.options[i].layer = temp[j].layer + 1;
                        temp.push(dropDown.options[i]);
                    }
                }
            }
        }
        dropDown.options.sort(function(folder1,folder2){
            return folder1.layer - folder2.layer;
        });
        dropDown.frozen = true;
    },

    getTopFolders : function(dropDown){
        var folders = new Array();
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].parentId == null){
                folders.push(dropDown.options[i]);
            }
        }
        return folders;
    },
    getFolderByCode : function(code, dropDown){
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].code == code){
                return dropDown.options[i];
            }
        }
        return null;
    },
    getLayerFolders : function (layer, dropDown){
        if (!dropDown.frozen){
            this.frozen(dropDown);
        }
        var folders = new Array();
        for (var i=0,len=dropDown.options.length; i<len; i++){
            if (dropDown.options[i].layer == layer){
                folders.push(dropDown.options[i]);
            }else if (dropDown.options[i].layer > layer){
                break;
            }
        }
        return folders;
    }
}
Dropdown.prototype.setRootName=function(nodeName){
    this.rootName = nodeName;
}