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");
}
});