jquery实现上下箭头下拉框 

<html>
 <head></head>
 <body>
  <form class="select"> 
   <input type="text" value="3" id="am" class="am" readonly="" /> 
   <div class="icon"> 
    <div class="up"></div> 
    <div class="down"></div> 
   </div> 
   <div id="HMF-1" style="display: none " class="bm"> 
    <span class="cur">3</span> 
    <span class="cur">2</span> 
    <span class="cur">1</span> 
   </div> 
  </form>
 </body>
</html>

　　css:

.select {
    min-width: 34px;
    position: relative;
    margin-top:2px;
    display: inline-block;
    display: -webkit-inline-box;
    border: 1px #999999 solid;
}

.cur {
    cursor: pointer;
    display: block;
    background:#fff;
    color:  #fd7602;
    height: 22px;
    line-height: 22px;
    padding-left:10px;
}

.cur:hover {
    background: #878787;
    color: #fff;
}

.am {
    border: 0px;
    color: #fd7602;
    cursor: pointer;
    width: 34px;
    height: 19px;
    padding-left: 10px;
}

.bm {
    position: absolute;
    border: 1px #999999 solid;
    width: 42px;
    margin-top: -21px;
    padding-top: 21px;
}

.icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 19px;
    padding: 3px;
}

.icon div {
    width: 7px;
    height: 3px;
    cursor: pointer;
}

.icon .up {
    margin-top:2px;
    background:url(img/pop/jian.png) top center no-repeat;
}

.icon .down {
    margin-top:3px;
    background:url(img/pop/jian.png) bottom center no-repeat;
}

js:

 function selectFn(){
            var select_index=0;
            var _span=$('span.cur');
            var _am=$('#am');
            var _select_div=$('#HMF-1');

            $('span.cur').click(function(){
                select_index=$(this).index();
                _am.val($(this).html());
                _select_div.css('display','none');
                $('form.select').css('border','1px #999999 solid');
            });
            _am.click(function(){
                if(_select_div.css('display') =='none'){
                    _select_div.css('display','block');
                   $('form.select').css('border','none');
                }
                else{
                    _select_div.css('display','none');
                    $('form.select').css('border','1px #999999 solid');
                }
            });
            $('div.up').click(function(){
                select_index = select_index >0 ? (select_index-1) : 0;
                _am.val(_span.eq(select_index).html());
            });
            $('div.down').click(function(){
                select_index = select_index <_span.length-1 ? (select_index+1) : select_index;
                _am.val(_span.eq(select_index).html());
            });
        }

 







        

            posted on 
2014-11-24 13:27 
草莓蜜酱 
阅读(656) 
评论(0) 
编辑 
收藏 
举报

        

    











    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    





	






	
		
		

导航