<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());
});
}
时间： 2024-10-10 12:15:07