积跬步，聚小流------div模拟select，让select美美哒

1、效果展示

先来看一下实现的效果，做到心中有数：

未展开时默认select样式：
展开后select样式：

2、实现原理

select无非是将一些元素罗列在一块，起先将罗列起来的元素隐藏，当点击显示部分时，将隐藏部分显示，同时点击所排列元素的其中一个，更换显示信息后，将其余元素重新隐藏，根据这一原理我们来用div来模拟一下select框

3、代码实现

a、结构

首先，我们来完成相应的结构代码编写：

<div id="divselect" class="select_divselect">
   <cite><img src="images/yh_gsyh.png" /><label>工商银行</label></cite>
   <ul style="display:none;">
      <li><a href=" "><img src="images/yh_zgyh.png" /><label>中国银行</label></a></li>
      <li><a href=" "><img src="images/yh_zsyh.png" /><label>招商银行</label></a></li>
      <li><a href=" "><img src="images/yh_jsyh.png" /><label>建设银行</label></a></li>
      <li><a href=" "><img src="images/yh_gfyh.png" /><label>广发银行</label></a></li>
      <li><a href=" "><img src="images/yh_shyh.png" /><label>上海银行</label></a></li>
   </ul>
</div>

这时候，我们来看下相应的实现效果：

b、样式控制

这时候我们来完善一下样式的美化，首先是一直显示的部分：

.select_divselect {
	width: 290px;
	height: 36px;
	padding: 2px 5px;
	border: 1px solid #999;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;	
}

.select_divselect_noradius {
	/*这里加这个，是为了修改圆角的时候方便，但是代码同时会增多，会不会影响性能呢,还希望有大神解惑*/
	width: 290px;
	height: 36px;
	padding: 2px 5px;
	border: 1px solid #999;
	border-bottom: 0px;
	border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	position: relative;
}
.select_divselect cite,.select_divselect_noradius cite {
	display: block;
	width: 290px;
	height: 36px;
	line-height: 36px;
	background: url(../images/xjt.png) no-repeat right center;
	text-align: center;
	position: relative;
}
.select_divselect cite img,.select_divselect_noradius cite img {
	width: 30px;
	height: 30px;
	border: 0px;	
	position: absolute;
	left: 20px;
	top: 3px;
	margin: 0px;
}

然后美化，罗列元素的部分：

.select_divselect ul img,.select_divselect_noradius ul img {
	width: 30px;
	height: 30px;
	border: 0px;	
	position: absolute;
	left: 25px;
	top: 5px;
	margin: 0px;
}
.select_divselect ul,.select_divselect_noradius ul {
	position: absolute;
	z-index: 99;
	width: 300px;
	border: 1px solid #999;
	left: 0px;
	background: #fff;
	/*border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;*/
	top: 41px;
	height: 200px;
	overflow-x: hidden;
	overflow-y: scroll;
}
.select_divselect_noradius ul li,.select_divselect ul li {
	position: relative;
	text-align: center;
	line-height: 40px;
	border-bottom: 1px solid #ccc;	
}
.select_divselect_noradius ul li a,.select_divselect ul li a {
	display:block;
	height:40px;
	color: #333;
	width: 290px;
	text-align: center;
	margin: 0px;
	text-decoration: none;
}
.select_divselect_noradius ul li a:hover,.select_divselect_noradius ul li a.yh_selected {
	color: #fff;
	background:  #ff5205;
	text-decoration: none;
}

我在reset.css里面设置了ul { padding: 0px; margin: 0px; list-style: none}这里就不再重复添加了,这时候我们来看下加了样式后的效果：

这时候，我们还需要做的一件事情，就是讲罗列的地方隐藏起来：

.select_divselect ul {
	display:none;	
}

c、行为控制

;(function($){
	$.extend({
		'divselect':function(divselectid,inputselectid) {
			var inputselect = $(inputselectid);
			$(divselectid+" cite").click(function(event){
				var ul = $(divselectid+" ul");
				if(ul.css("display")=="none"){
					$("#divselect").addClass("select_divselect_noradius") .removeClass("select_divselect");
					ul.slideDown("fast");
				}else{
					ul.slideUp("fast");
					$("#divselect").addClass("select_divselect") .removeClass("select_divselect_noradius");
				}
				event.preventDefault();event.stopPropagation();
			});
			$(divselectid+" ul li a").click(function(event){//选取某一信息时
				$("#divselect").addClass("select_divselect") .removeClass("select_divselect_noradius");
				var txt = $(this).html();
				$(divselectid+" cite").html(txt);//这里可以进行操作，比方说加个隐藏域，后台获取隐藏域信息
				var value = $(this).addClass("yh_selected").parent().siblings().find("a").removeClass("yh_selected");//保证选中的变色
				$(divselectid+" ul").hide();
				event.preventDefault();event.stopPropagation();//防止冒泡
			});
			$(document).click(function(){
				$("#divselect").addClass("select_divselect") .removeClass("select_divselect_noradius");
				$(divselectid+" ul").hide();
			});
		}
	})
})(jQuery)

这样我们所需要的功能就实现了啊，快点来试试看吧...