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

用js实现在列表框中的选择项目用树型菜单来显示，可以分级的，就像csdn左边的导航一样

就是在下拉列表框中下选择项以树状的形式显示，当单击列表框中的那个三角按钮时，不是会弹出一个列表选择，就时在这个列表中显示树型的目录，可以进行选择

现在急需一个这样例子，如果谁会弄的话，请赐教！！

5 个解决方案

#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 = $;

})();

看看吧。自己写的

#1