$(document).ready(function () {

    // 找出需要美化的<select>標(biāo)記，我們用一個(gè)class名稱 "beautify" 來(lái)確定，沒有這個(gè)樣式的<select>則將被忽略
    var selects = $("select.beautify");
    if (selects.length > 0) {

        //先在代碼底部增加一個(gè)<div>，用來(lái)承載和顯示下拉框選項(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í)將事件冒泡給原來(lái)的 <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庫(kù)中的方法，稍等另外給出
                $(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)頁(yè)上的游離區(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()
        );
    }
});