下拉选样式（列表伪装）

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

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

html

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

 <div class="chooseSite" id="chooseProvince">
<ul id="province" class="siteSelect">请选择省</ul>
 </div>
 <div class="province-list" id="province_list">
<ul>
<li>北京市</li>
<li>北京市</li>
<li>北京市</li>
<li>新疆维吾尔自治区</li>
<li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li><li>北京市</li>
</ul>  
 </div>
<div class="chooseSite">
<ul id="city" class="siteSelect">请选择城市</ul>
<span class="need"> </span>

</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;就行了

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