1，简单下拉框
![]()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style type="text/css">
ul{padding: 0;margin:0;}
ul li{height: 25px;line-height:25px;list-style: none;border: 1px solid #ccc;}
</style>
</head>
<body>
<div class="wrap">
<div class="tg-select" >
<input value="请选择" readonly="readonly" type="text">
<ul style="display: none;">
<li data-value="1">1</li>
<li data-value="2">2</li>
<li data-value="3">3</li>
<li data-value="4">4</li>
</ul>
</div>
</div>
<script>
$('.tg-select').click(function(){
$(this).find('ul').toggle();
})
$('.tg-select li').click(function(){
var val=$(this).text();
$(this).parents('.tg-select').find('input').val(val);
})
</script>
</body>
</html>
2，带遮罩层的下拉框选择
![]()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0;}
.input_select{width:150px; height:24px; line-height:24px;}
#dropdown{width:170px;position:relation;}
.drop-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:99;display:none;}
#dropdown ul{position:absolute;display:none;width: 100%;left: 0;bottom: 0;z-index:100;}
#dropdown ul li{background:#fff;text-align:center;height:30px;line-height:30px;min-height:30px;width:auto;border-bottom: 1px solid #d4d4d4;}
#dropdown ul li a{display:block; color:#807a62; text-decoration:none}
#dropdown ul li a:hover{background:#f4f4f4; color:#369}
</style>
</head>
<body>
<div class="drop-mask"></div>
<span>
<div id="dropdown">
<input readonly class="frameOrEngine input_select" type="text" placeholder="请输入选中数"
/>
<ul>
<li><a rel="4">4</a></li>
<li><a rel="5">5</a></li>
<li><a rel="6">6</a></li>
<li><a rel="7">7</a></li>
<li><a rel="8">8</a></li>
<li><a rel="9">9</a></li>
</ul>
</div>
</span>
<script>
$(".input_select").click(function(){
var ul = $("#dropdown ul");
if(ul.css("display")=="none"){
ul.slideDown("fast");
$(".drop-mask").show();
}else{
ul.slideUp("fast");
$(".drop-mask").hide();
}
});
$("#dropdown ul li a").click(function(){
var txt = $(this).text();
$(".input_select").val(txt);
$("#dropdown ul").hide();
$(".drop-mask").hide();
});
</script>
</body>
</html>
浙公网安备 33010602011771号