javascript和jquery模拟select框 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#department {
    float: left;
    display: inline;
    height: 38px;
    width: 198px;
    background: #fff;
    color: #565656;
    font-size: 14px;
    margin-right: 6px;
    line-height: 38px;
    position: relative;
    border: 1px solid #9e9d9d;
 *top:1px;
}
#department span {
    height: 38px;
    display: block;
    text-align: left;
    background: url(../images/down.jpg) no-repeat 170px 15px;
    cursor: pointer;
    width: 188px;
    overflow: hidden;
    padding-left: 10px;
}
#department ul {
    display: block;
    list-style: none;
    position: absolute;
    width: 198px;
    padding: 5px 0px;
    margin: 0px;
    overflow: hidden;
    top: 38px;
    border: 1px solid #9e9d9d;
    background-color: #FFF;
    left: -1px;
}
#department ul li {
    height: 20px;
    line-height: 20px;
    display: block;
    text-align: left;
}
#department ul li a {
    display: block;
    height: 20px;
    line-height:20px;
    margin: 0 5px;
    overflow: hidden;
    padding-left: 7px;
    text-decoration: none;
    outline: none
}
#department ul li a:hover {
    background: #9FD0E8;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script>
/*
    window.onload=function(){
        function $(id){
            return document.getElementById(id);
        }
        var oSpan=$('selectTop');
        var aUl=$('selectDown');
        var aLi=$('selectDown').getElementsByTagName('li');
        oSpan.onclick = function(ev){
            var ev = ev || window.event;
            if(aUl.style.display == 'none'){
                aUl.style.display = 'block'
            }
            else{
                aUl.style.display = 'none'
            }
            ev.cancelBubble = true;
        }
        document.onclick=function(){
            
            if(aUl.style.display == 'block'){
                aUl.style.display = 'none'
            }
        }
        for(i=0;i<aLi.length;i++){
            aLi[i].onclick=function(){
                oSpan.innerHTML = this.getElementsByTagName('a')[0].innerHTML;  
                
            }
        }
    }
*/
//jquery写法
$(document).ready(function(e) {

    var aUl=$('#selectDown');
    var aLi=$('#selectDown').find('li');
    $('#selectTop').bind("click", function(ev){
        var ev = ev || window.event;
        if(aUl.css("display") == 'none'){
            aUl.show();
        }
        else{
            aUl.css("display","none");
        }
        ev.stopPropagation();
    });
    $(document).bind("click", function(){
        aUl.css("display","none");
    })
    for(i=0;i<aLi.length;i++){
        aLi.eq(i).click( function(){
            $('#selectTop').html( $(this).find("a").html() );
        })
    }

});
</script>
</head>
<body>
    <div id="department">
        <span id="selectTop">选择所在单位</span>
        <ul id="selectDown" style="display: none;">
            <li><a href="javascript:void(0);" id="L_freemail" data="900">合谐医疗</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="101">广物汽贸工会</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="102" >广州市友谊</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="103">中国人寿</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="104">寮步消防队</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="105" >中国人寿金钻健康俱乐部</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="106">四五八医院龙伟</a></li>
            <li><a href="javascript:void(0);" id="L_freemail" data="107">南粤物流</a></li>
        </ul>
    </div>
</body>
</html>

 

posted @ 2013-01-06 11:04  vincent_ds  Views(1068)  Comments(0)    收藏  举报