用jQuery实现的模拟下拉框代码

很多群员问了关于下拉框美化的问题，现打一个下拉框美化的制作过程，其实是模拟出来的下拉框。
问题1：为什么要模拟下拉框？
1，浏览器自带的下拉框样式不好看。
2，在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。
OK，明白这个问题后，我们就开始用jQuery制作模拟下拉框。

第一步：先搭建好结构
这是普通的下拉框代码：
XML/HTML代码
复制代码代码如下:

这个是模拟出来的：
XML/HTML代码
复制代码代码如下:

选项一

选项一

选项二

选项三

选项四

选项五

选项六

<!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"/> </head> <body > 1，先搭建好结构 <select name="abc" id="abc">     <option value="1">选项一</option>     <option value="2">选项二</option>     <option value="3">选项三</option>     <option value="4">选项四</option>     <option value="5">选项五</option>     <option value="6">选项六</option> </select>  VS<input type="hidden" value="" name="abc" id="abc"/>      <input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/>      选项一     <ul class="CRselectBoxOptions">  <li class="CRselectBoxItem">选项一</li>  <li class="CRselectBoxItem">选项二</li>  <li class="CRselectBoxItem">选项三</li>  <li class="CRselectBoxItem">选项四</li>  <li class="CRselectBoxItem">选项五</li>  <li class="CRselectBoxItem">选项六</li>     </ul>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
第二步：构建效果
主要就是Jquery代码：
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;
});

$(document).click(function(event){
if( $(event.target).attr("class") != "CRselectBox" ){
$(".CRselectBoxOptions").hide();
}
});

$("#test").click(function(){
var value = $("#abc").val();
var txt = $("#abc_CRtext").val();
alert( "你本次选择的值和文本分别是：" + value +" , "+txt );
});
})

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
其实到这里已经算是完成了。为了方便利用，就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html

完整实例打包下载

用jQuery实现的模拟下拉框代码

JavaScript相关栏目本月热门文章