用JavaScript來美化HTML的select標簽的下拉列表效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 用JavaScript來美化HTML的select標簽的下拉列表效果

編輯：關於JavaScript

首先通過一個例子來回顧一下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>

然後效果一般時這樣的：

20151117144635327.png (119×118)

美與丑暫且不論...所有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);

運行代碼跟原來的不變。

關於JavaScript

js使用cookie記錄用戶名的方法: 本文實例講述了js使用cookie記錄用戶名的方法。分享給大家供大家參考，具體如下：cookie思路
RequireJS多頁面應用實例分析: 本文是requireJS的一些知識點的總結，配上多頁面應用中的實例分析。本案例的目錄結構如下：req
JavaScript實現自己的DOM選擇器原理及代碼: 解釋器模式（Interpreter）：定義一種語法格式，通過程序解釋執行它並完成相應的任務。在前端編

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章