select标签模拟/美化方法采用JS外挂式插件

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

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

啥也不说了，都在代码里。

代码如下:

$(document).ready(function () {
// 找出需要 美化的<select>标记，我们用一个class名称 "beautify" 来确定，没有这个样式的<select>则将被忽略
var selects = $("select.beautify");
if (selects.length > 0) {
//先在代码底部增加一个<div>，用来承载和显示下拉框选项
$("body").append("<div id='dummydata' >//挨个 美化呗
selects.each(function () {
//给本函数下的 this (也就是 <select>) 设置一个别名，在下面的匿名函数中将会被用到
var select = this;
//创建一个 <input> ， .dummy 将用于我们对此类 <input> 进行专门样式定义
//同时将 <select> 的部分属性和样式复制给这个 dummy input
//创建完后，将这个 <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， 因为js加载失败时，我们还得用上它
this.style.display = "none";
// 当 <input class='dummy'> 被点击时
input.click(function () {
//调出前面创建的 <div id='dummydata'>，并清空内容
//将 <select> 的样式表传递给它，当需要对这个 …………………………………………………………………………

转载：http://www.verydemo.com/demo_c98_i53361.html