首先通過一個例子來回顧一下select標簽的用法：
<html><body><form><select 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的高度（這是最坑爹的！），只能靠font-size撐起來
select右側的下拉箭頭是無法使用背景消除的，這就導致無法使用css進行美化
總結起來，解決辦法主要有：
將select隱藏掉，而使用div進行模擬
將select透明度設置為0，然后使用相對定位在下方 加一個長得很像select又美化了的div
隱藏方案一般原理如下：
找到頁面需要處理的select，將其隱藏
根據select的option，創建一個li列表（當然也可以是div），并隱藏。
在select的位置創建一個div，顯示select的值（selected的option）。并使用css對其進行美化，使其看起來像一個select
添加事件，使點擊“select”的時候，顯示li列表。并使用相對定位，讓這個列表顯示在“select”下方
對li列表添加事件，模擬下拉框的選值過程（點擊事件和鍵盤↑↓事件都要模擬）
選值完成后，要將選的值顯示到上方的“select”，并設置真正的select的值
當然，如果你想做的更復雜點，還可以添加選項搜索、多選、多選后的選項刪除等。當時一般原理都跟上面差不多。網上也有很多這樣的插件。但使用網上的插件要注意測試瀏覽器的兼容性，功能越復雜的模擬select，兼容性越不好做
如果，你的程序不需要那么復雜的select，那么設置透明度的第二種方案也許適合你。今天要分享給大家的也是這個方案。
它的原理如下：
找到當前頁面的select，將其透明度設置為0.使其看不見，但是可以點擊并選值
創建一個div，使用相對定位，放置到select下方 ，并通過css控制使其看起來像一個select。為什么一定要放在下方呢？因為這樣，我們可以點擊真正的select，而用戶看起來像是點擊的這個模擬的select，因為真正的select是完全透明的。如果放置在上方，則用戶點擊的是這個模擬的select，真正的select不會展開！！！
設置div的text為select的值
添加事件，使真正的select選值后，將值顯示到模擬的div上
先上代碼吧：
( function ($){var selectFix= function (){var select=$( this );//設置透明度為0 當然你也可以使用css控制 使用Jquery設置透明度可以屏蔽 透明度的 瀏覽器兼容性問題$(select).css({"opacity" :0});//找到select的選項var sOptions= this .get(0).options;//設置模擬select的值var setFixDivText= function (selectValue){var text= "" ;for ( var i=0;i<sOptions.length;i++){var option=sOptions[i];if (option.value==selectValue){text=$(option).text();break ;}}return text;};//模擬的select//初始化時要將select的值傳入var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" >'+setFixDivText($(select).val())+ '</div>' );select.after(selectFixDiv);var left=$(select).offset().left;var top=$(select).offset().top-1; //因為一般select都有1px的邊框，所以這里往上拉1px$(selectFixDiv).css({"top" : top,"left" : left});//select選值時，將值顯示到模擬的select上$(select).bind( "change click" , function (){$(selectFixDiv).text(setFixDivText($( this ).val()));});};$.fn.selectFix=selectFix;})(jQuery);(function($){ var selectFix=function(){ var select=$(this); //設置透明度為0 當然你也可以使用css控制 使用Jquery設置透明度可以屏蔽 透明度的 瀏覽器兼容性問題 $(select).css({ "opacity":0 }); //找到select的選項 var sOptions=this.get(0).options; //設置模擬select的值 var setFixDivText=function(selectValue){ var text=""; for(var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if(option.value==selectValue){ text=$(option).text(); break; } } return text; }; //模擬的select //初始化時要將select的值傳入 var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix">'+setFixDivText($(select).val())+'</div>'); select.after(selectFixDiv); var left=$(select).offset().left; var top=$(select).offset().top-1;//因為一般select都有1px的邊框，所以這里往上拉1px $(selectFixDiv).css({ "top" : top, "left" : left }); //select選值時，將值顯示到模擬的select上 $(select).bind("change click",function(){ $(selectFixDiv).text(setFixDivText($(this).val())); }); }; $.fn.selectFix=selectFix; })(jQuery);
插件代碼運行：
jQuery(document).ready( function () {var selects=$( "select.selectInput" );if (selects.length){selects.each( function (){$( this ).selectFix();});}});jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ $(this).selectFix(); }); } }); 下面是html代碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >< HTML >< HEAD >< TITLE > New Document </ TITLE >< META NAME = "Generator" CONTENT = "EditPlus" >< META NAME = "Author" CONTENT = "" >< META NAME = "Keywords" CONTENT = "" >< META NAME = "Description" CONTENT = "" >< script type = text /javascript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" > </ script >< script type = text /javascript src = "temp.js" > </ script >< style >html {font-family: "宋體";font-size: 12px;line-height: 25px;color: #6F6F6F;}.dn {display: none;}select{cursor: pointer;}input,select,textarea,.selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression( this.hideFocus = true ); outline: none;}.formText,.selectInput,.text,.selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;}.selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;}.selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;}</ style ></ HEAD >< BODY >< div id = "main" >< select id = "sex" class = "selectInput" name = "sex" >< option value = "0" > 男 </ option >< option value = "1" > 女 </ option ></ select ></ div ></ BODY ></ HTML ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <script type=text/javascript src="temp.js"></script> <style> html {font-family: "宋體";font-size: 12px;line-height: 25px;color: #6F6F6F;} .dn {display: none;} select{cursor: pointer;} input, select, textarea, .selectFix {background: white;border: 1px solid #E0E0E0;hide-focus: expression(this.hideFocus=true); outline: none;} .formText, .selectInput, .text, .selectFix{border: 1px solid #CCC;width: 180px;height: 30px;line-height:30px;padding: 0 3px;} .selectInput {width: 248px; font-size:13px; position: relative; z-index: 2;} .selectFix{width:248px; background: url(selectBg.png) no-repeat; background-position: right; background-color: #fff; position:absolute; z-index: 1;} </style> </HEAD> <BODY> <div id="main"> <select id="sex" class="selectInput" name="sex"> <option value="0">男</option> <option value="1">女</option> </select> </div> </BODY> </HTML> 兼容主流瀏覽器。
但也還是有個重大的缺陷，在老版本的ie中，真正select的高度還是無法撐開。所以，用戶點擊模擬的select的靠下方的位置會發現select無法展開！！
不過設計的藝術在于平衡，如果你無法忍受這個缺陷，可以使用第一種解決方案。
另外，在測試后，發現如果select處于一個隱藏的容器中，那么顯示后，select的位置是一個空白！！
這是怎么回事呢？！
原來，html元素隱藏后是無法獲取他的屏幕坐標的！！！ 所以這時候顯示出來，真正的select完全透明了，而模擬的select跑到屏幕的左上角去了。因為他獲取select的坐標為（0,0）
不要著急，這個問題有下面的解決辦法：
1、單獨寫代碼觸發select的美化程序
首先，你需要將上面的美化程序運行代碼做以下修改：
jQuery(document).ready( function () {var selects=$( "select.selectInput" );if (selects.length){selects.each( function (){if (!($( this ).attr( "autoFix" )== "false" )){$( this ).selectFix();}});}});jQuery(document).ready(function() { var selects=$("select.selectInput"); if(selects.length){ selects.each(function(){ if(!($(this).attr("autoFix")=="false")){ $(this).selectFix(); } }); } }); 然后，在隱藏的select上加屬性autoFix="false"：
< select id = "sex" class = "selectInput" name = "sex" autoFix = "false" >< option value = "0" > 男 </ option >< option value = "1" > 女 </ option ></ select ><select id="sex" class="selectInput" name="sex" autoFix="false"> <option value="0">男</option> <option value="1">女</option> </select>
然后，在外部容器顯示的時候，手動調用$("#sex").selectFix()
2、如果容器的顯示或者隱藏是第三方插件控制，修改不方便可考慮下面的方案：
在美化程序中，先判斷select是否隱藏，如果否邏輯不變，如果隱藏，則加入一個timer，循環判斷元素是否被顯示，在其顯示的時候再自動調用fix，然后將timer移除
代碼如下：
//加上隱藏select的操作( function ($){var selectFix= function (){var select=$( this );//設置透明度為0 當然你也可以使用css控制 使用Jquery設置透明度可以屏蔽 透明度的 瀏覽器兼容性問題$(select).css({"opacity" :0});if (!select.is( ":hidden" )){var sOptions= this .get(0).options;var setFixDivText= function (selectValue){var text= "" ;for ( var i=0;i<sOptions.length;i++){var option=sOptions[i];if (option.value==selectValue){text=$(option).text();break ;}}return text;};var selectFixDiv=$( '<div id="J_selectFix_' +select.attr("id ")+'" class = "selectFix" status= "close" >'+setFixDivText($(select).val())+ '</div>' );select.after(selectFixDiv);var selectWidth=$(select).innerWidth();var selectFixDivWidth=$(selectFixDiv).innerWidth();var left=$(select).offset().left;var top=$(select).offset().top-1;$(selectFixDiv).css({"top" : top,"left" : left,"margin" : 0});$(select).bind( "change click" , function (){$(selectFixDiv).text(setFixDivText($( this ).val()));});} else {var tasks = function (){if (!$(select).is( ":hidden" )){$(select).selectFix();clearInterval(timer);}};var timer=setInterval(tasks,500)}};$.fn.selectFix=selectFix;})(jQuery);//加上隱藏select的操作 (function($){ var selectFix=function(){ var select=$(this); //設置透明度為0 當然你也可以使用css控制 使用Jquery設置透明度可以屏蔽 透明度的 瀏覽器兼容性問題 $(select).css({ "opacity":0 }); if(!select.is(":hidden")){ var sOptions=this.get(0).options; var setFixDivText=function(selectValue){ var text=""; for(var i=0;i<sOptions.length;i++){ var option=sOptions[i]; if(option.value==selectValue){ text=$(option).text(); break; } } return text; }; var selectFixDiv=$('<div id="J_selectFix_'+select.attr("id")+'" class="selectFix" status="close">'+setFixDivText($(select).val())+'</div>'); select.after(selectFixDiv); var selectWidth=$(select).innerWidth(); var selectFixDivWidth=$(selectFixDiv).innerWidth(); var left=$(select).offset().left; var top=$(select).offset().top-1; $(selectFixDiv).css({ "top" : top, "left" : left, "margin" : 0 }); $(select).bind("change click",function(){ $(selectFixDiv).text(setFixDivText($(this).val())); }); }else{ var tasks = function(){ if(!$(select).is(":hidden")){ $(select).selectFix(); clearInterval(timer); } }; var timer=setInterval(tasks,500) } }; $.fn.selectFix=selectFix; })(jQuery); 運行代碼跟原來的不變。
新聞熱點
疑難解答
