最近开发一网站的过程中碰到个需求，没有使用传统的select下拉框，而是使用了现代比较美观的一些元素设计了一个下拉框。对于这种东东，第一反应就是使用jquery来模拟了，还好，网上找了下，很快就找到了，而且效果还不错，这里和大家分享一下一个使用jquery模拟的select下拉框的效果。

首先看一下效果图吧！

下面是具体的源码！有兴趣的朋友自己看吧！应用到自己的项目中去还是非常容易的。

jquery模拟select下拉框效果

/** author www.phpernote.com **/

html,body,ul,li,div,a{margin:0;padding:0;font-size:12px;}

.CRselectBox {

background:#FFFFFF url(http://www.phpernote.com/images/select_box_off.gif) no-repeat right center;

border:1px solid #999;

cursor:pointer;

display:block;

width: 100px; height: 20px;

}

.CRselectBoxHover {

background:#FFFFFF url(http://www.phpernote.com/images/select_box_on.gif) no-repeat right center;

}

.CRselectBox a.CRselectValue {

display:block;

margin:1px 1px 2px;

padding:1px 20px 2px 4px;

white-space:nowrap;

color:#000;

overflow:hidden;

width:74px;

}

.CRselectBoxOptions {

background:#FFFFFF;

border:1px solid #999;

margin-left:-1px;

list-style:none;

overflow-y:auto;

z-index:1000;

position: absolute;

width:100px;display:none;

}

.CRselectBoxOptions a{

color:#000;

display:block;

height:22px;

line-height:22px;

padding-left:4px;

background:#fff;

overflow:hidden;

white-space:nowrap;

}

.CRselectBoxOptions a:hover{

background:#bbb

}

.CRselectBoxOptions a.selected{

background:#bbb

}

/* 解决 firefox 点击放大出现虚线框，从而导致滚动条的问题 */

.CRselectBox a {

outline: none;

text-decoration:none;

}

.CRselectBox a:focus {

outline: none;

text-decoration:none;

}

$(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 );

});

});

jquery模拟select下拉框效果