下拉选样式（列表伪装）

找了很久，用别人做好的由于都已经改变了dom结构，考虑到对后期不好操作，只好自己做了……

先找一个模版不错的，自己山寨把……

html

<td colspan="2" style="position: relative;">

</div>

</td>

由于使用select样式制作没能成功去除ie自带的小箭号标志，于是使用ul和li列表来伪装。

在开始之前，我们先将所有元素样式设置一下，因为我们要用的列表默认是有外间距和内间距的，并且每个有序列表前面是有一个点。

* {margin: 0;list-style: none;padding: 0;}

首先将第一个div的样式设置一下：（在此之前需要一个箭头的图片，格式大约16*8像素就够了，图片PNG格式，无背景，或白色，

右侧稍微留些空白，不然作为背景会顶着边框，不美观）

.chooseSite {border: 1px solid #2DB2FF;//边框border-radius: 5px;//边框弧度box-shadow: 0 0 2px #2DB2FF;//边框阴影height: 30px;//高度background: url("../img/arrow1.png") no-repeat scroll right center transparent;//背景（小箭号图标）padding-right: 12px;//右侧内边距，是为小箭号背景留出的，因为在div里面装了一个ul会盖住背景图片padding-left: 6px;//美观处理，左侧留出一些空白line-height: 30px;//行高与div高度相同，保证文字垂直居中width: 110px;//宽度font-size: 13px;//文字大小float: left;//多个div的话让其浮动可以在一行显示，为了美观可以加上外边距 margin，让两个div中间留出一些空白}

下面为列表部分添加样式：

这里采用绝对定位，这样出现的时候就可以盖住伪下拉选元素的下边框部分，那么要为最近的一个父元素样式中添加：position:relative;

.province-list {border: 1px solid #2DB2FF;//边框border-top: 0px;//不要顶部的边框border-radius: 2px;//边框弧度小一点box-shadow: 0 1px 2px #2DB2FF;height: 240px;width: 128px;position: absolute;top: 30px;font-size: 13px;background: white;overflow: hidden; padding-top: 4px;display: none;//将他设为隐藏}.province-list li {height: 26px;padding: 2px 0 2px 5px;line-height: 26px;}

大概效果是这样的：

做好了之后就是添加鼠标悬浮样式和鼠标单击后的样式：（其实是一样的）

.province-checked {//这里用来表示鼠标悬浮的时候切换的样式color: white;background: #2DB2FF; }.province-selected {//这里用来表示鼠标单击li后选中的样式color: white;background: #2DB2FF; }

考虑到鼠标单击后需要一个记录，而鼠标悬浮和移除li的时候会不断添加和删除样式，所以这么设计的

那么开始为li添加事件吧。

在一个script标签中：

$(function(){

$('form').find('li').mouSEOver(function(){//鼠标悬浮在某个li上，会添加悬浮样式$(this).addClass('province-checked');});$('form').find('li').mouseout(function(){//鼠标离开某个li后，会去掉悬浮添加的样式，恢复原来样式$(this).removeClass('province-checked');});$('form').find('li').click(function(){//单击事件

//先将已经添加的单击样式去掉，此处只能有一个，所以用eq(0)选择器，直接选择第一个元素就可以$('.province-selected').eq(0).removeClass('province-selected');

//这里为单击的li添加样式$(this).addClass('province-selected');

//获取我们单击li的值var province = $(this).text();

//单击后隐藏该列表$('#province_list').hide();

//此处为ul赋值替代初始值（请选择省）

……});

});

这样后，鼠标单击后会在li上留下红色部分的样式，而鼠标悬浮也会有橙色的样式，同时鼠标移除后又恢复原来样式。

接下来要为下拉选添加单击事件了：

需要在$(function(){……})中绑定

$('#chooseProvince').click(function(){if($('#province_list').is(':hidden')){$('#province_list').show();}else{$('#province_list').hide();}});

到这里列表是做好了，但是还不能点别的地方关闭。这里是一个比较坑的地方。花了相当大的功夫找资料。郁闷的差点放弃。

设计是单击空白处隐藏这个列表：

先写一个这个：去冒泡

function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; } 

接下来在$(function(){……}); 里面写下面绑定方法

$(document).bind('click',function(e){ var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是div子元素 if (elem.id=='chooseProvince' || elem.id=='province_list') { //试了很多次，发现上面的第一个div也要包括进去return; } elem = elem.parentNode;} $('#province_list').CSS('display','none'); //点击的不是div或其子元素隐藏列表 stopPropagation(e);//这个不知道有没用，暂且这么着}); 

那么好了，现在单击空白的地方已经可以关闭列表了

还有一个问题，列表太长？需要下拉的滚动条怎么办？

直接给province-list 加上overflow-y:auto;就行了

但是滚动条不是很好看，还需要美化一下的。