Jul
02
2013
jquery模拟select下拉框效果
作者：
绝缘体.. 发布：
2013-07-02 11:33 分类：
未分类 阅读：
抢沙发
最近开发一网站的过程中碰到个需求，没有使用传统的select下拉框，而是使用了现代比较美观的一些元素设计了一个下拉框。对于这种东东，第一反应就是使用jquery来模拟了，还好，网上找了下，很快就找到了，而且效果还不错，这里和大家分享一下一个使用jquery模拟的select下拉框的效果。
首先看一下效果图吧！
下面是具体的源码！有兴趣的朋友自己看吧！应用到自己的项目中去还是非常容易的。
<html xmlns="http://www.phpernote.com/seo/622.html">
<head>
<title>jquery模拟select下拉框效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/** 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;
}
</style>
<script src="http://www.phpernote.com/js/jquery.min.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>jquery模拟select下拉框效果</h1>
<div class="CRselectBox">
<input type="hidden" value="1" 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">phpernote.com</a></li>
</ul>
</div>
<br/>
<input type="button" id="test" value="输出选中的值和文本内容" />
</body>
</html>
微信扫一扫，打赏作者吧～
jquery模拟select下拉框效果：等您坐沙发呢！
发表评论
