用div+js做的一个select下拉列表遇到的几个问题

用div+js做的一个select下拉列表遇到的几个问题
1：
展开select后。不知道怎么关闭。就是鼠标点页面其它地方select关闭。
2：
当我选择上海时，怎么把上面的“请选择地区”换成上海
3：
怎么把<a href="#">上海</a>链接加长一点，现在只有鼠标点在“上海”文字上面才能转到其它页面
4：
scrollbar火狐下面就没有样式了请教各位高手了
<style type="text/css">
#select_open{position:relative;}
#select_input{background:url(images/select05.gif) no-repeat;width:154px;height:24px; cursor:hand;padding:3px 0 0 9px;color:#EDBE86;}
.select_list{border:#D1B586 1px solid;border-top:none;width:161px;background:#FFF;z-index:999999;position:absolute;top:24px;display:none;
scrollbar-face-color: #F3E6C4; 
scrollbar-highlight-color: #F3E6C4; 
scrollbar-shadow-color: #D1B586; 
scrollbar-3dlight-color: #D1B586; 
scrollbar-arrow-color: #D1B586; 
scrollbar-track-color: #D1B586; 
scrollbar-darkshadow-color: #D1B586; 
scrollbar-base-color: #D1B586; 
height: 150px;
overflow: auto; 
}
.select_list ul{padding:0px;margin:0px;}
.select_list li{line-height:25px;padding-left:5px;}
.select_list li a{color:#D08120; text-decoration:none;}
.cursor{background:#995D14;color:#FFF;}
.cursor a{color:#FFF;text-decoration:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#select_input").click(function(){
$(".select_list").show();
 });
$(".select_list li").mousemove(function(){
$(this).addClass("cursor");
$(this).click(function(){
$(".select_list").hide();
})
});
$(".select_list li").mouseout(function(){
$(this).removeClass();
});
});
</script>
              <div id="select_open">
                <div id="select_input">请选择地区</div>
                <div class="select_list">
                 <ul>
                     <li><a href="#">上海</a></li>
                     <li><a href="#">北京</a></li>
                     <li><a href="#">南京</a></li>
                     <li><a href="#">天津</a></li>
                     <li><a href="#">上海</a></li>
                     <li><a href="#">北京</a></li>
                     <li><a href="#">南京</a></li>
                     <li><a href="#">天津</a></li>                    </ul>
                </div>
              </div>

解决方案 »

  1.   

    第四个问题，可能是火狐不支持这个吧，不太确定，其实默认的scorllbar挺好看的。
    <html>
    <head><title>test</title>
    <style type="text/css">
    #select_open{position:relative;}
    #select_input{
    background:url(images/select05.gif) no-repeat;
    width:154px;height:24px;
    cursor:hand;padding:3px 0 0 9px;
    color:#EDBE86;
    }
    .select_list{
    border:#D1B586 1px solid;border-top:none;
    width:161px;background:#FFF;z-index:999999;
    position:absolute;top:24px;display:none;
    scrollbar-face-color: #F3E6C4;
    scrollbar-highlight-color: #F3E6C4;
    scrollbar-shadow-color: #D1B586;
    scrollbar-3dlight-color: #D1B586;
    scrollbar-arrow-color: #D1B586;
    scrollbar-track-color: #D1B586;
    scrollbar-darkshadow-color: #D1B586;
    scrollbar-base-color: #D1B586;
    height: 150px;
    overflow: auto;
    }
    .select_list ul{padding:0px;margin:0px;}
    .select_list li{line-height:25px;padding-left:5px;}
    .select_list li a{color:#D08120; text-decoration:none;/*看这里*/display:block;width:100%;/*这里*/}
    .cursor{background:#995D14;color:#FFF;}
    .cursor a{color:#FFF;text-decoration:none;}
    </style>
    <script type="text/javascript">
    $(function(){
    $("#select_input").click(function(event){
    event.preventDefault();
    $(".select_list").show();
    });
    $(".select_list li").mouseover(function(){
    $(this).addClass("cursor");
    $(this).click(function(){
    $(".select_list").hide();
    })
    });
    $(".select_list li").mouseout(function(){
    $(this).removeClass();
    });
    $(".select_list a").click(function(event){
    $("#select_input").text($(this).text());
    });
    $(document).click(function(event){
    if (event.target.id != "select_input")
    {
    $(".select_list").hide();
    }
    });
    });
    </script>
    <body>
    <div id="select_open">
    <div id="select_input">请选择地区</div>
    <div class="select_list">
    <ul>
    <li><a href="#">上海</a></li>
    <li><a href="#">北京</a></li>
    <li><a href="#">南京</a></li>
    <li><a href="#">天津</a></li>
    <li><a href="#">上海</a></li>
    <li><a href="#">北京</a></li>
    <li><a href="#">南京</a></li>
    <li><a href="#">天津</a></li>
    </ul>
    </div>
    </div>
    </body>
    </html>