div模拟select下拉列表

由于select在不同浏览器中的显示不一样,而且样式单一,我们经常会用其他标签模拟select。模拟出来的select灵活多变,
可以使用css来任意修饰它。
下面贴上代码,超级简单:
<div class="mbox">
	<span class="lab">请选择城市:</span>
	<div class="list_lab">请选择</div>
	<ul class="lists" show="false">
		<li>北京</li>
		<li>上海</li>
		<li>深圳</li>
		<li>广州</li>
	</ul>
</div>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.mbox{
	position: relative;
	margin: 100px auto;
	width: 300px;
	min-height: 200px;
}
.lab{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 30px;
}
.list_lab{
	position: absolute;
	left: 120px;
	top: 0;
	width: 150px;
	height: 30px;
	border: 1px solid #000;
	line-height: 30px;
}
.lists{
	position: absolute;
	left: 120px;
	top: 29px;
	width: 150px;
	line-height: 30px;
	border: 1px solid #000;
	display: none;
}
.lists li,.list_lab{
	padding: 0 5px;
	cursor: pointer;
}
.lists li:hover{
	background: #000;
	color: #fff;
}
</style>
<script type="text/javascript">
	$(".list_lab").click(function(){
		var sta = $(".lists").attr("show");
		if(sta == 'false'){
			$(".lists").slideDown(100);
			$(".lists").attr("show","true");
		}else if(sta == 'true'){
			$(".lists").slideUp(100);
			$(".lists").attr("show","false");
		}
	})
	$(".lists li").click(function(){
		var val = $(this).html();
		$(".list_lab").html(val);
		$(".lists").slideUp(100).attr("show","false");
	})
	$('body').bind("selectstart", function () { return false; });
</script>
效果如下图: