求一个用js实现的树型下拉列表框

用js实现在列表框中的选择项目用树型菜单来显示，可以分级的，就像csdn左边的导航一样就是在下拉列表框中下选择项以树状的形式显示，当单击列表框中的那个三角按钮时，不是会弹出一个列表选择，就时在这个列表中显示树型的目录，可以进行选择现在急需一个这样例子，如果谁会弄的话，请赐教！！

解决方案 »

  1.   

    好像csdn有现成的例子，你找找看
      

  2.   

    JQuery里面有树形结构的widget，你可以搜搜
      

  3.   

    网上很多现成的 自己找找
    一般都是js结合cookie实现的
      

  4.   

    jquery插件树：http://blog.csdn.net/IBM_hoojo/archive/2010/06/24/5691142.aspx
      

  5.   


    <!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" lang="zh-cn">
    <head>
    <title></title>
    <script type="text/javascript" src="js/tools.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    var tres = $(".tres");
    var content = $(".content");

    for(var i = 0; i < content.length; i ++) {
    var color = i%2==0?"#b7b0f9":"#dcd7f7";
    $(content[i]).css({backgroundColor:color});
    }
    $(".title").css({backgroundColor:"#94e1f1"});
    $(".title").attr({onclick:function() {
    var temp = $($(this)[0].parentNode).css("height") || "18px";
    temp = temp=="18px"?"125px":"18px";
    $($(this)[0].parentNode).css({height:temp});
    }});
    }
    </script>
    <style type="text/css">
    .tres{width:200px;height:18px;border:solid 1px;overflow:hidden;cursor:pointer;}
    .content{text-align:center;}
    </style>
    </head><body>
    <script type="text/javascript">
    var dom = document;
    for(var i = 0; i < 5; i ++) {
    var title;
    switch(i){
    case 0:title = "我的好友"; break;
    case 1:title = "我的同学"; break;
    case 2:title = "我的亲人"; break;
    case 3:title = "陌生人"; break;
    case 4:title = "黑名单"; break;
    }
    dom.write("<div class='tres'><div class='title'>"+title+"</div>");
    for(var j = 0; j < 6; j ++ ) {
    dom.write("<div class='content'>内容</div>");
    }
    dom.write("</div>");
    }
    </script>
    </body>
    </html>
    (function() {
    var p = /^\s*([.#]?)(\w+)\s*$/
    ,
    $ = function( selectStr){
    return new Lib(selectStr);
    },
    Lib = function(select) {
    this.length = 0;
    if(!select) {
    return;
    }
    if(select.nodeType) {
    this.push(select);
    return;
    }
    select = p.exec(select);
    if(select[1] == "#") {
    this.push(document.getElementById(select[2]));
    return;
    }
    if(select[1] == ".") {
    var temp = document.getElementsByTagName("*");
    for(var i = 0; i < temp.length; i ++) {
    if(temp[i].className == select[2]) {
    this.push(temp[i]);
    }
    }
    return;
    }
    var temp = document.getElementsByTagName(select[2]);
    for(var i = 0; i < temp.length; i ++) {
    this.push(temp[i]);
    }
    }

    Lib.prototype = {
    push:Array.prototype.push,
    css:function( css ) {
    if (!css) {
    return;
    }
    if (typeof(css) == "string") {
    return this[0].style[css];
    }
    for(var o in css) {
    for(var i = 0; i < this.length; i ++) {
    this[i].style[o] = css[o];
    }
    }
    },
    attr:function( attr ) {
    if (!attr) {
    return;
    }
    if (typeof(attr) == "string") {
    return this[0][attr];
    }
    for (var o in attr) {
    for (var i = 0; i < this.length; i++) {
    this[i][o] = attr[o];
    }
    }
    }
    }

    window.$ = window.Lib = $;
    })();
    看看吧。自己写的