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>