首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery 模拟下拉框

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

2010-03-08 18:21:57 作者：

用jQuery制作模拟下拉框浏览器自带的下拉框样式不好看。在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。

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

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

复制代码代码如下:

 
<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> 

这个是模拟出来的：
XML/HTML代码

复制代码代码如下:

 
<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="#">选项一</a> 
<ul class="CRselectBoxOptions"> 
<li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li> 
<li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li> 
</ul> 
</div> 

VS 
 
<div class="CRselectBox"> 
    <input type="hidden" value="" name="abc" id="abc"/>  
    <input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/>  
    <a class="CRselectValue" href="#">选项一</a> 
    <ul class="CRselectBoxOptions"> 
        <li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li> 
    </ul> 
</div> 
</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========================*/ 
$("#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; 
    }); 
    /*点击任何地方关闭层*/ 
    $(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，构建效果(需要刷新下，才能看到效果)</h1> 
<div class="CRselectBox"> 
    <input type="hidden" value="1" name="abc" id="abc"/> 
    <input type="hidden" value="选项一" name="abc_CRtext" id="abc_CRtext"/>  
    <a class="CRselectValue" href="#">选项一</a> 
    <ul class="CRselectBoxOptions"> 
        <li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li> 
        <li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li> 
    </ul> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

其实到这里已经算是完成了。为了方便利用，就做成插件吧。
http://demo.jb51.net/js/JQuery_select/demo3.html

完整实例打包下载

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

您可能感兴趣的文章: