JS,UL模拟下拉框

HTML元素

<div class="select_box">
	<input type="text" class="input_date1" value="交通"/>
	<ul>
		<li attr="1">交通</li>
		<li attr="2">住宿</li>
		<li attr="3">拜访</li>
		<li attr="4">其他</li>
	</ul>
	<input type="hidden" value="1"  id="action_type"/>
</div>

CSS

.select_box { position:relative;padding:0; display:inline-block;zoom:1;*zoom:1;*display:inline;}
.select_box input border:1px solid #999;width:150px;height:28px;}
.select_box input:hover{}
.select_box ul {width:150px; position:absolute; left:0; top:28px; border:1px solid #85BEE5;overflow: hidden;display:none; background:white; z-index:9999;}
.select_box ul li {display:block;height:30px;overflow:hidden;line-height:30px;padding-left:5px;width:100%;cursor:pointer;}
.select_box ul li:hover{background:#d2eaff; }

JQUERY

	$(".select_box input").live("click",function(){
		var thisinput=$(this);
		var thisul=$(this).parent().find("ul");
		if(thisul.css("display")=="none"){
				if(thisul.height()>180){thisul.css({height:"180"+"px","overflow-y":"scroll" })};
				thisul.fadeIn("100");
				thisul.hover(function(){},function(){thisul.fadeOut("100");})
				thisul.find("li").click(function(){
				thisinput.val($(this).text());
				$(this).parent().parent().find("input:hidden").val($(this).attr("attr"));
				thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
		}
		else{
				thisul.fadeOut("fast");
		}
				
	});