jquery模拟select

html代码

<div id="dropdown">

<input class="input_select" type="text" value="徐立阳"/>

<ul>

<li><a href="javascript:;" rel="2">哈伦</a></li>

<li><a href="javascript:;" rel="3">四个</a></li>

<li><a href="javascript:;" rel="4">傻瓜</a></li>

<li><a href="javascript:;" rel="5">哈哈</a></li>

</ul>

</div>

css代码

#dropdown{

width:100px;

margin:0 auto;

position:relative;

}

.input_select{

width:66px;

height:24px;

line-height:24px;

padding-left:4px;

padding-right:30px;

border:1px solid #dee3ea;

border-radius: 3px;

color:#807a62;

background: url(../images/conpile-arrow.png) no-repeat 80px;

}

#dropdown ul{

width:100px;

background:#e8f5fe;

margin-top:2px;

border:1px solid #a9c9e2;

position:absolute;

display:none;

}

#dropdown ul li{

height:24px;

line-height:24px;

text-indent:10px;

}

#dropdown ul li a{

display:block;

height:24px;

color:#807a62;

text-decoration:none;

}

#dropdown ul li a:hover{

background:#c6dbfc;

color:#369;

}

jquery代码

<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>

<script type="text/javascript">

$(function(){

$(".input_select").click(function(){

var ul = $("#dropdown ul");

if(ul.css("display")=="none"){

ul.slideDown("fast");

}else{

ul.slideUp("fast");

}

});

$("#dropdown ul li a").click(function(){

var txt = $(this).text();

$(".input_select").val(txt);

var value = $(this).attr("rel");

$("#dropdown ul").hide();

});

});

</script>