$(document).ready(function () {
// 找出需要美化的<select>標(biāo)記，我們用一個(gè)class名稱 "beautify" 來確定，沒有這個(gè)樣式的<select>則將被忽略
var selects = $("select.beautify");
if (selects.length > 0) {
//先在代碼底部增加一個(gè)<div>，用來承載和顯示下拉框選項(xiàng)
$("body").append("<div id='dummydata' style='position:absolute; display:none'></div>");
//挨個(gè)美化唄
selects.each(function () {
//給本函數(shù)下的 this (也就是 <select>) 設(shè)置一個(gè)別名，在下面的匿名函數(shù)中將會(huì)被用到
var select = this;
//創(chuàng)建一個(gè) <input> ， .dummy 將用于我們對(duì)此類 <input> 進(jìn)行專門樣式定義
//同時(shí)將 <select> 的部分屬性和樣式復(fù)制給這個(gè) dummy input
//創(chuàng)建完后，將這個(gè) <input> dom， 緊跟原 <select>
var input = $("<input type='text' readonly='readonly' class='input dummy' />")
.attr("disabled", this.disabled)
.css("width", parseInt(this.style.width) + "px")
.css("display", this.style.display)
.insertAfter(this)
.val(this.options[this.selectedIndex].text);
//將 <select> 藏掉，不要在 .beautify 中去定義 display:none， 因?yàn)閖s加載失敗時(shí)，我們還得用上它
this.style.display = "none";
// 當(dāng) <input class='dummy'> 被點(diǎn)擊時(shí)
input.click(function () {
//調(diào)出前面創(chuàng)建的 <div id='dummydata'>，并清空內(nèi)容
//將 <select> 的樣式表傳遞給它，當(dāng)需要對(duì)這個(gè) <div> 進(jìn)行修飾時(shí)，就靠這些樣式定義
var div = $("#dummydata")
.empty()
.attr("class", select.className);
//設(shè)置 <div> 的寬度
//在這里我們判斷一個(gè)特殊的class名 "extend"
//如果帶有 .extend，表示寬度將受額外自定義控制；否則，寬度將默認(rèn)與 <input> 一致
$(select).hasClass("extend")
? div.css("width", "")
: div.css("width", $(this).innerWidth());
//將 <option> 復(fù)制到 <div id='dummydata'> 里面，一個(gè) <option> 對(duì)應(yīng)一個(gè) <a> 標(biāo)記
for (var i = 0; i < select.options.length; i++) {
var item = select.options[i];
var a = $("<a href='javascript:void(0);' class='nowrap'></a>")
.css("color", item.style.color)
.addClass(item.className)
.html(item.text)
.appendTo(div);
if (i == select.selectedIndex) {
a.addClass("selected");
}
//當(dāng)選項(xiàng)被點(diǎn)擊時(shí)，<input> 內(nèi)容顯示為對(duì)應(yīng) <option>，關(guān)閉 <div> 層，同時(shí)將事件冒泡給原來的 <select>
a.click(function () {
var n = $(this).index();
select.selectedIndex = n;
input.val(select.options[n].text);
div.hide();
$(select).change();
});
}
//在這里我們判斷一個(gè)特殊的class名 "noscroll"
//當(dāng)選項(xiàng)過多時(shí)，默認(rèn)會(huì)讓選項(xiàng)列表出現(xiàn)滾動(dòng)條；但如果有 .noscroll 修飾，則強(qiáng)制不出現(xiàn)滾動(dòng)條
var noscroll = (select.options.length < 10 || $(select).hasClass("noscroll"));
if (/msie 6/i.test(window.navigator.userAgent)) {
div.css("height", noscroll ? "auto" : "215px").css("overflow-y", noscroll ? "hidden" : "scroll");
} else {
div.css("max-height", noscroll ? "10000px" : "215px");
}
//在這里我們判斷一個(gè)特殊的class名 "onside"
//如果有 .onside 修飾，彈出的選項(xiàng)層將在側(cè)面，否則是在下面
//注： 此處用到2個(gè)函數(shù) locateBeside 和 locateBelow 是本人js庫中的方法，稍等另外給出
$(select).hasClass("onside")
? div.locateBeside(this, -2)
: div.locateBelow(this, -4);
//對(duì)反復(fù)點(diǎn)擊 <input> 之類的事情，做一些智能調(diào)節(jié)
if (window.activeDummySelect == select) {
div.slideToggle(100);
} else {
div.hide().slideDown(100);
window.activeDummySelect = select;
}
//在有滾動(dòng)條的情況下，我們需要將滾動(dòng)條滾動(dòng)到當(dāng)前選中項(xiàng)的位置
if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height()) {
div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight);
}
});
});
//最后別忘了：點(diǎn)擊網(wǎng)頁上的游離區(qū)域時(shí)，應(yīng)該隱藏<div #dummydata>
$(document).click(function (e) {
if (!$(e.target).is(".dummy") && !$(e.target).is("#dummydata")) {
$("#dummydata").hide();
}
});
}
});

$.fn.extend({
locate: function (x, y) {
if (this.css("position") == "fixed") {
y -= $(document).scrollTop();
}
return this.css({ left: x, top: y });
},
locateBeside: function (el, adjustX) {
var p = $(el).offset(),
w1 = $(el).outerWidth(),
w2 = this.outerWidth(),
h2 = this.outerHeight(),
x = p.left + w1 + 5 + (adjustX || 0),
y = p.top;
if ($(document).width() < x + w2) {
x = p.left - w2 - 5 - (adjustX || 0);
}
if ($(document).height() < y + h2) {
y = p.top - (y + h2 + 15 - $(document).height());
}
return this.locate(x, y);
},
locateBelow: function (el, adjustY) {
var p = $(el).offset();
return this.locate(p.left, p.top + $(el).outerHeight() + 3 + (adjustY || 0));
},
locateCenter: function () {
return this.locate(
($(window).width() - this.width()) / 2,
($(window).height() - this.height()) / 2 + $(document).scrollTop()
);
}
});

input.dummy { background-image: url(/static/images/combo.gif); background-position: right 12px; background-repeat: no-repeat; cursor: pointer !important; }
input.dummy:hover, input.dummy:focus { background-image: url(/static/images/combo_hover.gif); }
#dummydata { position: absolute; z-index: 20; border: 1px solid #a4601e; background-color: #393939; max-height: 200px; overflow: auto; }
#dummydata a { display: block; color: #ddd; line-height: 25px; text-indent: 3px; text-overflow: ellipsis; }
#dummydata a:hover { color: #198cef; text-decoration: none; }
#dummydata.matrix { width: 208px; padding: 5px; } /* matrix 效果 */
#dummydata.matrix a { float: left; width: 33%; }
#dummydata.matrix-large { width: 640px; padding: 5px; } /* matrix-large 效果 */
#dummydata.matrix-large a { float: left; width: 25%; }
#dummydata a.fullwidth { float: none; }
#dummydata a.delimiter { float: none; width: 100%; height: 10px; visibility: hidden; }
#dummydata a.selected { color: yellow; }