积跬步，聚小流------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)

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