select标记美化--JS式插件、后期加载

<select>标签的外观问题很恼人，各个浏览器都不一致，单单就IE，一个版本就一个长相，还不能用CSS修饰。

在这将本人对<select>的美化方法共享出来。
优点： 仍保留使用<select>，仅改变外观，不改变不干预Form行为，后期加载JS。（注：本脚本依赖jQuery）

啥也不说了，都在代码里。
效果图在底部。

$(document).ready(function () {
    // 找出需要美化的标记，我们用一个class名称 "beautify" 来确定，没有这个样式的则将被忽略
    var selects = $("select.beautify");
    if (selects.length > 0) {
        //先在代码底部增加一个
，用来承载和显示下拉框选项
        $("body").append("
");
        //挨个美化呗
        selects.each(function () {
            //给本函数下的 this (也就是 ) 设置一个别名，在下面的匿名函数中将会被用到
            var select = this;
            //创建一个  ，  .dummy 将用于我们对此类  进行专门样式定义
            //同时将  的部分属性和样式复制给这个 dummy input
            //创建完后，将这个  插入 dom， 紧跟原 
            var input = $("")
                .attr("disabled", this.disabled)
                .css("width", parseInt(this.style.width)   "px")
                .css("display", this.style.display)
                .insertAfter(this)
                .val(this.options[this.selectedIndex].text);
            //将  藏掉，不要在 .beautify 中去定义 display:none， 因为js加载失败时，我们还得用上它
            this.style.display = "none";
            // 当  被点击时
            input.click(function () {
                //调出前面创建的 
，并清空内容
                //将  的样式表传递给它，当需要对这个 
 进行修饰时，就靠这些样式定义
                var div = $("#dummydata")
                    .empty()
                    .attr("class", select.className);
                //设置 
 的宽度
                //在这里我们判断一个特殊的class名 "extend"
                //如果带有 .extend，表示宽度将受额外自定义控制；否则，宽度将默认与  一致
                $(select).hasClass("extend")
                    ? div.css("width", "")
                    : div.css("width", $(this).innerWidth());
                //将  复制到 
 里面，一个  对应一个  标记
                for (var i = 0; i ")
                        .css("color", item.style.color)
                        .addClass(item.className)
                        .html(item.text)
                        .appendTo(div);
                    if (i == select.selectedIndex) {
                        a.addClass("selected");
                    }
                    //当选项被点击时， 内容显示为对应 
，关闭 
 层，同时将事件冒泡给原来的 
                    a.click(function () {
                        var n = $(this).index();
                        select.selectedIndex = n;
                        input.val(select.options[n].text);
                        div.hide();
                        $(select).change();
                    });
                }
                //在这里我们判断一个特殊的class名 "noscroll"
                //当选项过多时，默认会让选项列表出现滚动条；但如果有 .noscroll 修饰，则强制不出现滚动条
                var noscroll = (select.options.length  之类的事情，做一些智能调节
                if (window.activeDummySelect == select) {
                    div.slideToggle(100);
                } else {
                    div.hide().slideDown(100);
                    window.activeDummySelect = select;
                }
                //在有滚动条的情况下，我们需要将滚动条滚动到当前选中项的位置
                if (!select.selectedIndex > 6 && div[0].scrollHeight > div.height()) {
                    div.scrollTop((select.selectedIndex - 3) * div[0].firstChild.offsetHeight);
                }
            });
        });
        //最后别忘了：点击网页上的游离区域时，应该隐藏

        $(document).click(function (e) {
            if (!$(e.target).is(".dummy") && !$(e.target).is("#dummydata")) {
                $("#dummydata").hide();
            }
        });
    }
});