用JavaScript來(lái)美化HTML的select標(biāo)簽的下拉列表效果
首先通過(guò)一個(gè)例子來(lái)回顧一下select標(biāo)簽的用法：
<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>
然后效果一般時(shí)這樣的：
美與丑暫且不論...所有html元素中select算是比較坑爹的一個(gè)。他讓人抓狂的地方主要是：
不同的瀏覽器顯示的默認(rèn)下拉框樣子不完全相同
IE下無(wú)法手動(dòng)設(shè)置select的高度（這是最坑爹的！），只能靠font-size撐起來(lái)
select右側(cè)的下拉箭頭是無(wú)法使用背景消除的，這就導(dǎo)致無(wú)法使用css進(jìn)行美化
總結(jié)起來(lái)，解決辦法主要有：
將select隱藏掉，而使用div進(jìn)行模擬
將select透明度設(shè)置為0，然后使用相對(duì)定位在下方 加一個(gè)長(zhǎng)得很像select又美化了的div
隱藏方案一般原理如下：
找到頁(yè)面需要處理的select，將其隱藏
根據(jù)select的option，創(chuàng)建一個(gè)li列表（當(dāng)然也可以是div），并隱藏。
在select的位置創(chuàng)建一個(gè)div，顯示select的值（selected的option）。并使用css對(duì)其進(jìn)行美化，使其看起來(lái)像一個(gè)select
添加事件，使點(diǎn)擊“select”的時(shí)候，顯示li列表。并使用相對(duì)定位，讓這個(gè)列表顯示在“select”下方
對(duì)li列表添加事件，模擬下拉框的選值過(guò)程（點(diǎn)擊事件和鍵盤(pán)↑↓事件都要模擬）
選值完成后，要將選的值顯示到上方的“select”，并設(shè)置真正的select的值
當(dāng)然，如果你想做的更復(fù)雜點(diǎn)，還可以添加選項(xiàng)搜索、多選、多選后的選項(xiàng)刪除等。當(dāng)時(shí)一般原理都跟上面差不多。網(wǎng)上也有很多這樣的插件。但使用網(wǎng)上的插件要注意測(cè)試瀏覽器的兼容性，功能越復(fù)雜的模擬select，兼容性越不好做
如果，你的程序不需要那么復(fù)雜的select，那么設(shè)置透明度的第二種方案也許適合你。今天要分享給大家的也是這個(gè)方案。
它的原理如下：
找到當(dāng)前頁(yè)面的select，將其透明度設(shè)置為0.使其看不見(jiàn)，但是可以點(diǎn)擊并選值
創(chuàng)建一個(gè)div，使用相對(duì)定位，放置到select下方 ，并通過(guò)css控制使其看起來(lái)像一個(gè)select。為什么一定要放在下方呢？因?yàn)檫@樣，我們可以點(diǎn)擊真正的select，而用戶看起來(lái)像是點(diǎn)擊的這個(gè)模擬的select，因?yàn)檎嬲膕elect是完全透明的。如果放置在上方，則用戶點(diǎn)擊的是這個(gè)模擬的select，真正的select不會(huì)展開(kāi)?。?！
設(shè)置div的text為select的值
添加事件，使真正的select選值后，將值顯示到模擬的div上
先上代碼吧：
( function ($){
var selectFix= function (){
var select=$( this );
//設(shè)置透明度為0 當(dāng)然你也可以使用css控制 使用Jquery設(shè)置透明度可以屏蔽 透明度的 瀏覽器兼容性問(wèn)題
$(select).css({
"opacity" :0
});
//找到select的選項(xiàng)
var sOptions= this .get(0).options;
//設(shè)置模擬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
//初始化時(shí)要將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; //因?yàn)橐话鉺elect都有1px的邊框，所以這里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select選值時(shí)，將值顯示到模擬的select上
$(select).bind( "change click" , function (){
$(selectFixDiv).text(setFixDivText($( this ).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
(function($){
var selectFix=function(){
var select=$(this);
//設(shè)置透明度為0 當(dāng)然你也可以使用css控制 使用Jquery設(shè)置透明度可以屏蔽 透明度的 瀏覽器兼容性問(wèn)題
$(select).css({
"opacity":0
});
//找到select的選項(xiàng)
var sOptions=this.get(0).options;
//設(shè)置模擬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
//初始化時(shí)要將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;//因?yàn)橐话鉺elect都有1px的邊框，所以這里往上拉1px
$(selectFixDiv).css({
"top" : top,
"left" : left
});
//select選值時(shí)，將值顯示到模擬的select上
$(select).bind("change click",function(){
$(selectFixDiv).text(setFixDivText($(this).val()));
});
};
$.fn.selectFix=selectFix;
})(jQuery);
插件代碼運(yùn)行：
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>
兼容主流瀏覽器。
但也還是有個(gè)重大的缺陷，在老版本的ie中，真正select的高度還是無(wú)法撐開(kāi)。所以，用戶點(diǎn)擊模擬的select的靠下方的位置會(huì)發(fā)現(xiàn)select無(wú)法展開(kāi)?。?br />
不過(guò)設(shè)計(jì)的藝術(shù)在于平衡，如果你無(wú)法忍受這個(gè)缺陷，可以使用第一種解決方案。
另外，在測(cè)試后，發(fā)現(xiàn)如果select處于一個(gè)隱藏的容器中，那么顯示后，select的位置是一個(gè)空白??！
這是怎么回事呢？！
原來(lái)，html元素隱藏后是無(wú)法獲取他的屏幕坐標(biāo)的！??！ 所以這時(shí)候顯示出來(lái)，真正的select完全透明了，而模擬的select跑到屏幕的左上角去了。因?yàn)樗@取select的坐標(biāo)為（0,0）
不要著急，這個(gè)問(wèn)題有下面的解決辦法：
1、單獨(dú)寫(xiě)代碼觸發(fā)select的美化程序
首先，你需要將上面的美化程序運(yùn)行代碼做以下修改：
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>
然后，在外部容器顯示的時(shí)候，手動(dòng)調(diào)用$("#sex").selectFix()
2、如果容器的顯示或者隱藏是第三方插件控制，修改不方便可考慮下面的方案：
在美化程序中，先判斷select是否隱藏，如果否邏輯不變，如果隱藏，則加入一個(gè)timer，循環(huán)判斷元素是否被顯示，在其顯示的時(shí)候再自動(dòng)調(diào)用fix，然后將timer移除
代碼如下：
//加上隱藏select的操作
( function ($){
var selectFix= function (){
var select=$( this );
//設(shè)置透明度為0 當(dāng)然你也可以使用css控制 使用Jquery設(shè)置透明度可以屏蔽 透明度的 瀏覽器兼容性問(wèn)題
$(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);
//設(shè)置透明度為0 當(dāng)然你也可以使用css控制 使用Jquery設(shè)置透明度可以屏蔽 透明度的 瀏覽器兼容性問(wèn)題
$(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);
運(yùn)行代碼跟原來(lái)的不變。
相關(guān)文章
JavaScript 語(yǔ)言在 ES6 規(guī)范中引入了 Symbol 類(lèi)型,它是一種原始數(shù)據(jù)類(lèi)型,用于創(chuàng)建唯一的標(biāo)識(shí)符,本文將介紹 Symbol 類(lèi)型的所有靜態(tài)屬性,并舉例說(shuō)明它們的用途和使用場(chǎng)景,希望對(duì)大家有所幫助2023-12-12
JavaScript 拖拽與觀察者模式的實(shí)現(xiàn)及應(yīng)用小結(jié)
本文通過(guò)代碼片段詳細(xì)介紹了JavaScript中的拖拽功能和觀察者模式（發(fā)布-訂閱模式）的實(shí)現(xiàn)及其應(yīng)用場(chǎng)景,拖拽功能允許用戶通過(guò)鼠標(biāo)移動(dòng)元素,而觀察者模式則定義了一種一對(duì)多的依賴(lài)關(guān)系,使得對(duì)象能夠自動(dòng)更新,感興趣的朋友跟隨小編一起看看吧2025-01-01
JavaScript設(shè)計(jì)模式之裝飾者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式,結(jié)合實(shí)例形式較為詳細(xì)的分析了裝飾者模式的概念、原理及javascript定義、使用裝飾者模式的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
給Javascript數(shù)組插入一條記錄的代碼...2007-08-08
用console.table()調(diào)試javascript
昨天我了解到Chrome調(diào)試工具一個(gè)小巧的調(diào)試方法，在WDCC期間， Marcus Ross（@zahlenhelfer） 介紹了，chrome調(diào)試工具各種調(diào)試方法，這個(gè)只是其中一種，現(xiàn)在我來(lái)給大家秀下。2014-09-09
JS常見(jiàn)錯(cuò)誤(Error)及處理方案詳解
這篇文章主要介紹了JS常見(jiàn)錯(cuò)誤(Error)及處理方案詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Lab.js初次使用筆記,本文對(duì)比了普通動(dòng)態(tài)加載JS文件的技術(shù)和使用Lab.js加載JS文件的技術(shù),并給出了Lab.js加載示例,需要的朋友可以參考下2015-02-02
javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)
event在IE和FF不兼，下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07
本篇文章主要是對(duì)JS保留兩位小數(shù),多位小數(shù)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
Javascript的表單與驗(yàn)證-非空驗(yàn)證
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。本文給大家介紹javascript的表單與驗(yàn)證-非空驗(yàn)證，對(duì)javascript表單驗(yàn)證相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03