用jQuery實(shí)現(xiàn)的模擬下拉框代碼

更新時(shí)間：2010年03月08日 18:21:57 作者：

用jQuery制作模擬下拉框瀏覽器自帶的下拉框樣式不好看。在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。

很多群?jiǎn)T問了關(guān)于下拉框美化的問題，現(xiàn)打一個(gè)下拉框美化的制作過程，其實(shí)是模擬出來的下拉框。
問題1：為什么要模擬下拉框？
1，瀏覽器自帶的下拉框樣式不好看。
2，在ie6下，下拉框的優(yōu)先級(jí)大于層，經(jīng)常導(dǎo)致下拉框顯示在層的上面。
OK，明白這個(gè)問題后，我們就開始用jQuery制作模擬下拉框。

第一步：先搭建好結(jié)構(gòu)
這是普通的下拉框代碼：
XML/HTML代碼

復(fù)制代碼代碼如下:

 
<select name="abc" id="abc"> 
<option value="1">選項(xiàng)一</option> 
<option value="2">選項(xiàng)二</option> 
<option value="3">選項(xiàng)三</option> 
<option value="4">選項(xiàng)四</option> 
<option value="5">選項(xiàng)五</option> 
<option value="6">選項(xiàng)六</option> 
</select> 

這個(gè)是模擬出來的：
XML/HTML代碼

復(fù)制代碼代碼如下:

 
<div class="CRselectBox"> 
<input type="hidden" value="" name="abc" id="abc"/> <!-- hidden 用來代替select的值 --> 
<input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/> <!-- hidden 用來代替select的文本--> 
<a class="CRselectValue" href="#">選項(xiàng)一</a> 
<ul class="CRselectBoxOptions"> 
<li class="CRselectBoxItem"><a href="#" class="selected" rel="1">選項(xiàng)一</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="2">選項(xiàng)二</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="3">選項(xiàng)三</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="4">選項(xiàng)四</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="5">選項(xiàng)五</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="6">選項(xiàng)六</a></li> 
</ul> 
</div> 

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

第二步：構(gòu)建效果
主要就是Jquery代碼：
JavaScript代碼

復(fù)制代碼代碼如下:

 
$(function(){ 
$(".CRselectBox").hover(function(){ 
$(this).addClass("CRselectBoxHover"); 
},function(){ 
$(this).removeClass("CRselectBoxHover"); 
}); 
$(".CRselectValue").click(function(){ 
$(this).blur(); 
$(".CRselectBoxOptions").show(); 
return false; 
}); 
$(".CRselectBoxItem a").click(function(){ 
$(this).blur(); 
var value = $(this).attr("rel"); 
var txt = $(this).text(); 
$("#abc").val(value); 
$("#abc_CRtext").val(txt); 
$(".CRselectValue").text(txt); 
$(".CRselectBoxItem a").removeClass("selected"); 
$(this).addClass("selected"); 
$(".CRselectBoxOptions").hide(); 
return false; 
}); 
/*點(diǎn)擊任何地方關(guān)閉層*/ 
$(document).click(function(event){ 
if( $(event.target).attr("class") != "CRselectBox" ){ 
$(".CRselectBoxOptions").hide(); 
} 
}); 
/*===================Test========================*/ 
$("#test").click(function(){ 
var value = $("#abc").val(); 
var txt = $("#abc_CRtext").val(); 
alert( "你本次選擇的值和文本分別是：" + value +" , "+txt ); 
}); 
}) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" href="css/CRselectBox.css" type="text/css"/> <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){     $(".CRselectBox").hover(function(){         $(this).addClass("CRselectBoxHover");     },function(){         $(this).removeClass("CRselectBoxHover");     });     $(".CRselectValue").click(function(){         $(this).blur();         $(".CRselectBoxOptions").show();         return false;     });     $(".CRselectBoxItem a").click(function(){         $(this).blur();         var value = $(this).attr("rel");         var txt = $(this).text();         $("#abc").val(value);         $("#abc_CRtext").val(txt);         $(".CRselectValue").text(txt);         $(".CRselectBoxItem a").removeClass("selected");         $(this).addClass("selected");         $(".CRselectBoxOptions").hide();         return false;     });     /*點(diǎn)擊任何地方關(guān)閉層*/     $(document).click(function(event){         if( $(event.target).attr("class") != "CRselectBox" ){             $(".CRselectBoxOptions").hide();         }     });     /*===================Test========================*/     $("#test").click(function(){         var value = $("#abc").val();         var txt = $("#abc_CRtext").val();         alert( "你本次選擇的值和文本分別是：" + value +" , "+txt );     }); }) </script> </head> <body > <h1>2，構(gòu)建效果(需要刷新下，才能看到效果)</h1> <div   id="cvptuej"   class="CRselectBox">     <input type="hidden" value="1" name="abc" id="abc"/>     <input type="hidden" value="選項(xiàng)一" name="abc_CRtext" id="abc_CRtext"/>      <a class="CRselectValue" href="#">選項(xiàng)一</a>     <ul class="CRselectBoxOptions">         <li id="jydscbc"    class="CRselectBoxItem"><a href="#" class="selected" rel="1">選項(xiàng)一</a></li>         <li id="1jlfvqh"    class="CRselectBoxItem"><a href="#" rel="2">選項(xiàng)二</a></li>         <li id="6z8egcs"    class="CRselectBoxItem"><a href="#" rel="3">選項(xiàng)三</a></li>         <li id="vzi8tq8"    class="CRselectBoxItem"><a href="#" rel="4">選項(xiàng)四</a></li>         <li id="kydej3c"    class="CRselectBoxItem"><a href="#" rel="5">選項(xiàng)五</a></li>         <li id="0dixs3y"    class="CRselectBoxItem"><a href="#" rel="6">選項(xiàng)六</a></li>     </ul> </div>  <input type="button" id="test" value="輸出選中的值和文本內(nèi)容"/> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

其實(shí)到這里已經(jīng)算是完成了。為了方便利用，就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html

完整實(shí)例打包下載

您可能感興趣的文章: