首先，用一个例子回顾select标记的用法：

html bodyformselect name=' cars ' option value=' Volvo ' Volvo/option option value=' Saab ' Saab/option option value=' fiat ' fiat/option option value=' Audi ' Audi/option/select/form/body/html然后效果一般是这样的：

抛开美丑不谈.在所有html元素中，select是一个相当棘手的元素。让人抓狂的是，不同浏览器显示的默认下拉框并不完全一样。IE下无法手动设置select的高度(这是最尴尬的！)，这只能通过字体大小来支持。select右侧的下拉箭头无法使用背景去除，导致无法使用css进行美化和总结。主要解决方案有：

隐藏选择，用div模拟，将选择的透明度设置为0，然后使用相对定位添加一个看起来像底部选择的美化div。

隐藏方案的一般原理如下：找到页面需要处理的选择并隐藏。根据选择选项，创建一个li列表(也可以是div)并隐藏它。在选择的位置创建一个div，并显示选择的值(选择的选项)。并用css美化它，使它看起来像一个选择添加事件，这样当您单击“选择”时，将显示li的列表。并使用相对定位，使该列表显示在“选择”下，将事件添加到li列表中，并模拟下拉框的值选择过程(点击事件和键盘事件应模拟)。值选择完成后，将选择的值显示在顶部的“选择”，并设置选择的真实值。当然，如果你想做更复杂的事情，也可以增加选项搜索、多选、多选后的选项删除。当时的一般原则与上述类似。网上有很多这样的插件。但是在互联网上使用插件的时候，要注意测试浏览器的兼容性。功能越复杂，兼容性越差。如果您的程序不需要如此复杂的选择，那么第二种设置透明度的方案可能适合您。也正是这个计划，我今天想和大家分享。其原理如下：找到当前页面的选区，将其透明度设置为0。使其不可见，但您可以单击并选择一个值来创建div，使用相对定位，将其放在select下，并使其看起来像是通过css控件选择的。为什么一定要放在底部？这样，我们可以点击真实选择，用户看起来就像这个模拟选择，因为真实选择是完全透明的。如果放在最上面，用户点击模拟选择，真实选择不会被展开！设置div的文本，将一个事件添加到select的值中，这样在真正的select选择该值后，在模拟div上显示该值，并首先对其进行编码：

（函数($){ var selectFix=function(){ var select=$(this)；//设置透明度为0 当然你也可以使用钢性铸铁控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题$(选择)。css({ '不透明度' :0 });//找到挑选的选项变量操作=这个.获取(0)。选项；//设置模拟挑选的值var setFixDivText=function(SelectVaLue){ var text=' '；for(var I=0；长度；I){ var option=SOPs[I]；if(选项。value==SelectValue){ text=$(选项).text()；打破；} }返回文本；};//模拟的选择/初始化时要将挑选的值传入var SelectFix div=$(' div id=' J _ SelectFix _ ' select。attr(' id ')' class=' SelectFix ' ' SetFixdovText($(select)).val())'/div ')；选择。在(SelectFixDiv)之后；var left=$(选择)。偏移量()。向左；var top=$(选择)。偏移量()。top-1；//因为一般挑选都有1px的边框，所以这里往上拉1px$(selectFixDiv).css({'top' : top，' left ' : left })；//选择选值时，将值显示到模拟的挑选上$(选择)。bind('change click '，function (){$(selectFixDiv)).text(setFixDivText)($(this).val()))；});};$ . fn . SelectFix=SelectFix })(jQuery)；（函数($){ var selectFix=function(){ var select=$(this)；//设置透明度为0 当然你也可以使用钢性铸铁控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题$(选择)。css({ '不透明度' :0 });//找到挑选的选项var sOptions=this.get(0).选项；//设置模拟挑选的值var setFixDivText=function(SelectVaLue){ var text=' '；for(var I=0；长度；I){ var option=SOPs[I]；if(选项。value==SelectValue){ text=$(选项).text()；打破；} }返回文本；};//模拟的选择/初始化时要将挑选的值传入var SelectFix div=$(' div id=' J _ SelectFix _ ' select。attr(' id ')' class=' SelectFix ' ' SetFixdovText($(select)).val())'/div ')；选择。在(SelectFixDiv)之后；var left=$(选择)。偏移量()。向左；var top=$(选择)。偏移量()。top-1；//因为一般挑选都有1px的边框，所以这里往上拉1px $(selectFixDiv).css({ 'top' : top，' left ' : left })；//选择选值时，将值显示到模拟的挑选上$(选择)。bind('change click '，function(){ $(selectFixDiv)).text(setFixDivText)($(this).val()))；});};$ . fn . SelectFix=SelectFix })(jQuery)；插件代码运行：

jQuery(文档)。ready(function(){ var select=$(' select。selection put’)；if(选择。长度){ selects。每个(函数(){ $(this)).selectFix()；});}});jQuery(文档)。ready(function(){ var select=$(' select。selection put’)；if(选择。长度){ selects。每个(函数(){ $(this)).selectFix()；});} });下面是超文本标记语言代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML HEAD TITLE新文档/TITLE META NAME=' Generator ' CONTENT=' EditPlus ' META NAME=' Author ' CONTENT=' META NAME=' Keywords ' CONTENT=' META NAME=' Description ' CONTENT='脚本类型=text/JavaScript src=' http://Ajax。谷歌api。com/Ajax/libs/jquery/1.6/jquery。量滴js /脚本类型=文本/javas宋体；font-size : 12px线高： 25pxcolor: # 6F6F6F}。dn { display: none}选择cursor:指针；}输入、选择、文本区域、选择{ background : white border : 1px实心# E0E 0；隐藏焦点：表达式(这个。隐藏焦点=true)；大纲：无；}.表单文本.选择输入。文字，选择{ border: 1px固体# CCC宽度： 180像素；高度： 30px线高：30 pxpadding: 0 3px }。选择输入{ width : 248 pxfont-size :13 px；相对位置：z-index : 2；}.选择{ width :248 px background : URL(select BG。巴布亚新几内亚)不重复；背景-位置：右侧；背景-color : # fff；位置：绝对；z-index : 1；}/style/HEAD BODY div id=' main ' select id=' seminal ' class=' selection put ' name=' seminal '选项值='0 '男/option选项值='1 '女/选项/选择/div/BODY/HTML！' DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN ' HTML HEAD TITLE新建文档/TITLE META NAME=' Generator ' CONTENT=' EditPlus ' META NAME=' Author ' CONTENT=' META NAME=' Keywords ' CONTENT=' META NAME=' Description ' CONTENT='脚本类型=text/JavaScript src=' http 3360http://Ajax。谷歌api。com/Ajax/libs/jquery/1.6/jquery。量滴js /脚本脚本宋体；font-size : 12px线高： 25pxcolor: # 6F6F6F}。dn { display: none}选择cursor:指针；}输入、选择、文本区域、选择{ background : white border : 1px实心# E0E 0；隐藏焦点：表达式(这个。隐藏焦点=true)；大纲：无；} .表单文本.选择输入。文字，选择{ border: 1px固体# CCC宽度： 180像素；高度： 30px线高：30 pxpadding: 0 3px }。选择输入{ width : 248 pxfont-size :13 px；相对位置：z-index : 2；} .选择{ width :248 px background : URL(select BG。巴布亚新几内亚)不重复；背景-位置：右侧；背景-color : # fff；位置：绝对；z-index : 1；}/style/HEAD BODY div id=' main ' select id=' seminal ' class=' selection put ' name=' seminal '选项值='0 '男/option选项值='1 '女/选项/选择/div /BODY /HTML兼容主流浏览器。但也还是有个重大的缺陷，在老版本的工程师协会中，真正挑选的高度还是无法撑开。所以，用户点击模拟的挑选的靠下方的位置会发现挑选无法展开！不过设计的艺术在于平衡，如果你无法忍受这个缺陷，可以使用第一种解决方案。另外，在测试后，发现如果挑选处于一个隐藏的容器中，那么显示后，选择的位置是一个空白！这是怎么回事呢？原来，html元素隐藏后是无法获取他的屏幕坐标的！所以这时候显示出来，真正的挑选完全透明了，而模拟的挑选跑到屏幕的左上角去了。因为他获取挑选的坐标为(0,0)不要着急，这个问题有下面的解决办法：1、单独写代码触发挑选的美化程序首先，你需要将上面的美化程序运行代码做以下修改：

jQuery(文档)。ready(function(){ var select=$(' select。selection put’)；if(选择。长度){ selects。每个(函数(){ if(！($(这个)。attr(' autoFix ')==' false '){ $(this).selectFix()；}});}});jQuery(文档)。ready(function(){ var select=$(' select。selection put’)；if(选择。长度){ selects。每个(函数(){ if(！($(这个)。attr(' autoFix ')==' false '){ $(this).selectFix()；} });} });然后，在隐藏的挑选上加属性autoFix='false ':

select id=' semantic ' class=' selection put ' name=' semantic ' autoFix=' false '选项值='0 '男/option选项值='1 '女/option/select select id=' sexual ' class=' selection put ' name=' sexual ' autoFix=' false '选项值='0 '男/option选项值='1 '女/option /select然后，在外部容器显示的时候，手动调用$('#sex ').选择修复(2 ),如果容器的显示或者隐藏是第三方插件控制，修改不方便可考虑下面的方案：在美化程序中，先判断挑选是否隐藏，如果否逻辑不变，如果隐藏，则加入一个计时器，循环判断元素是否被显示，在其显示的时候再自动调用修复，然后将计时器移除代码如下：

//加上隐藏挑选的操作（函数($){ var selectFix=function(){ var select=$(this)；//设置透明度为0 当然你也可以使用钢性铸铁控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题$(选择)。css({ '不透明度' :0 });if(！选择。是(' :隐藏'){ var Soptions=this .获取(0)。选项；var setFixDivText=function(SelectVaLue){ var text=' '；for(var I=0；长度；I){ var option=SOPs[I]；if(选项。value==SelectValue){ text=$(选项).text()；打破；} }返回文本；};var SelectFix div=$(' div id=' J _ SelectFix _ ' select。attr(' id ')' class=' SelectFix ' status=' close ' ' SetFixDivText($(select)).val())'/div ')；选择。在(SelectFixDiv)之后；var selectWidth=$(select).内部宽度()；var selectFixDivWidth=$(selectFixDiv).内部宽度()；var left=$(选择)。偏移量()。向左；var top=$(选择)。偏移量()。top-1；$(selectFixDiv).css({'top' : top，' left' : left，' margin ' : 0 })；$(选择)。bind('change click '，function (){$(selectFixDiv)).text(setFixDivText)($(this).val()))；});} else {var tasks=function (){if(！$(选择)。是(' :隐藏'){ $(选择).selectFix()；clearInterval(计时器);}};var timer=setInterval(tasks，500)} }；$ . fn . SelectFix=SelectFix })(jQuery)；//加上隐藏挑选的操作（函数($){ var selectFix=function(){ var select=$(this)；//设置透明度为0 当然你也可以使用钢性铸铁控制使用Jquery设置透明度可以屏蔽透明度的浏览器兼容性问题$(选择)。css({ '不透明度' :0 });if(！选择。is(' : hidden '){ var Soptions=this。获取(0).选项；var setFixDivText=function(SelectVaLue){ var text=' '；for(var I=0；长度；I){ var option=SOPs[I]；if(选项。value==SelectValue){ text=$(选项).text()；打破；} }返回文本；};var SelectFix div=$(' div id=' J _ SelectFix _ ' select。attr(' id ')' class=' SelectFix ' status=' close ' ' SetFixDivText($(select)).val())'/div ')；选择。在(SelectFixDiv)之后；var selectWidth=$(select).内部宽度()；var selectFixDivWidth=$(selectFixDiv).内部宽度()；var left=$(选择)。偏移量()。向左；var top=$(选择)。偏移量()。top-1；$(selectFixDiv).css({ 'top' : top，' left' : left，' margin ' : 0 })；$(选择)。bind('change click '，function(){ $(selectFixDiv)).text(setFixDivText)($(this).val()))；});}else{ var tasks=function(){ if(！$(选择)。是(' :隐藏'){ $(选择).selectFix()；clearInterval(计时器);} };var timer=setInterval(tasks，500)} }；$ . fn . SelectFix=SelectFix })(jQuery)；运行代码跟原来的不变。