找了很久，用別人做好的由于都已經(jīng)改變了dom結(jié)構(gòu)，考慮到對后期不好操作，只好自己做了……

先找一個模版不錯的，自己山寨把……

html

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

</div>

</td>

由于使用select樣式制作沒能成功去除ie自帶的小箭號標志，于是使用ul和li列表來偽裝。

在開始之前，我們先將所有元素樣式設(shè)置一下，因為我們要用的列表默認是有外間距和內(nèi)間距的，并且每個有序列表前面是有一個點。

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

首先將第一個div的樣式設(shè)置一下：（在此之前需要一個箭頭的圖片，格式大約16*8像素就夠了，圖片PNG格式，無背景，或白色，

右側(cè)稍微留些空白，不然作為背景會頂著邊框，不美觀）

.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;//右側(cè)內(nèi)邊距，是為小箭號背景留出的，因為在div里面裝了一個ul會蓋住背景圖片padding-left: 6px;//美觀處理，左側(cè)留出一些空白line-height: 30px;//行高與div高度相同，保證文字垂直居中width: 110px;//寬度font-size: 13px;//文字大小float: left;//多個div的話讓其浮動可以在一行顯示，為了美觀可以加上外邊距 margin，讓兩個div中間留出一些空白}

下面為列表部分添加樣式：

這里采用絕對定位，這樣出現(xiàn)的時候就可以蓋住偽下拉選元素的下邊框部分，那么要為最近的一個父元素樣式中添加：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;//將他設(shè)為隱藏}.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的時候會不斷添加和刪除樣式，所以這么設(shè)計的

那么開始為li添加事件吧。

在一個scrSEOver(function(){//鼠標懸浮在某個li上，會添加懸浮樣式$(this).addClass('province-checked');});$('form').find('li').mouseout(function(){//鼠標離開某個li后，會去掉懸浮添加的樣式，恢復原來樣式$(this).removeClass('province-checked');});$('form').find('li').click(function(){//單擊事件

//先將已經(jīng)添加的單擊樣式去掉，此處只能有一個，所以用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();}});

到這里列表是做好了，但是還不能點別的地方關(guān)閉。這里是一個比較坑的地方。花了相當大的功夫找資料。郁悶的差點放棄。

設(shè)計是單擊空白處隱藏這個列表：

先寫一個這個：去冒泡

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) { //循環(huán)判斷至跟節(jié)點，防止點擊的是div子元素 if (elem.id=='chooseProvince' || elem.id=='province_list') { //試了很多次，發(fā)現(xiàn)上面的第一個div也要包括進去return; } elem = elem.parentNode;} $('#province_list').CSS('display','none'); //點擊的不是div或其子元素隱藏列表 stopPropagation(e);//這個不知道有沒用，暫且這么著}); 

那么好了，現(xiàn)在單擊空白的地方已經(jīng)可以關(guān)閉列表了

還有一個問題，列表太長？需要下拉的滾動條怎么辦？

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

但是滾動條不是很好看，還需要美化一下的。