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>
