首页 > 代码库 > jquery实现上下箭头下拉框

jquery实现上下箭头下拉框

2024-08-04 02:00:58   221人阅读

<html> <head></head> <body>  <form class="select">    <input type="text" value="http://www.mamicode.com/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());            });        }

 

jquery实现上下箭头下拉框






























        

            
                
                  
                
                

                    联系

                    我们