jQuery模拟select效果

最新推荐文章于 2016-12-05 16:14:01 发布

yaoxin524

最新推荐文章于 2016-12-05 16:14:01 发布

阅读量149

点赞数

分类专栏： jQuery 文章标签： jQuery C C++ C# Firefox ViewUI

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、jQuery制作select效果，此效果可用作自动提示功能中；
2、此示例包括键盘上、下合回车键的判断；
3、具体看附件，包含详细注释：
[quote]<!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>jQuery模拟select控件</title>
<style type="text/css">
/** Dev by CssRain.cn **/
html,body,ul,li,div,a{margin:0;padding:0;font-size:12px;}
.CRselectBox {
background:#FFFFFF url(../image/select_box_off.gif) no-repeat right center;
border:1px solid #999;
cursor:pointer;
display:block;
width: 100px; height: 20px;
}
.CRselectBoxHover {
background:#FFFFFF url(../image/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: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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
//鼠标滑动，改变当前div的样式
$(".CRselectBox").hover(function() {
$(this).addClass("CRselectBoxHover");
}, function() {
$(this).removeClass("CRselectBoxHover");
});
//点击字段，显示列表
$(".CRselectValue").click(function() {
$(this).blur();
$(".CRselectBoxOptions").show();
return false;
});

//点击某一选中A标签时，赋值。
$(".CRselectBoxItem a").click(function() {
$(this).blur();
//获取当前标签的rel值
var value = $(this).attr("rel");
//获取当前a标签的内容
var txt = $(this).text();
//记录当前选中值的rel值
$("#abc").val(value);
//记录当前选中值的内容
$("#abc_CRtext").val(txt);
//改变显示内容
$(".CRselectValue").text(txt);
//改变选中样式
$(".CRselectBoxItem a").removeClass("selected");
$(this).addClass("selected");
//隐藏列表
$(".CRselectBoxOptions").hide();

//记录当前选中项的rel，为键盘操作服务
$(".CRselectValue").attr("rel", $(this).attr("rel"));

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);
});

//调用键盘操作
UpOrDown();
})

//方向键控制上下翻动
function UpOrDown() {
$(".CRselectValue").keydown(function(e) {
//获取上一个选中项的rel
var a = parseInt($(".CRselectValue").attr("rel"));
//判断下方向键
if (e.keyCode == 40) {
//当在CRselectValue获取焦点时，按下方向键，显示列表
$(".CRselectBoxOptions").show();

//计算下一个选中项
var b = a + 1;
var c = b.toString();
//当下一个项为最后一个时，选中第一个
if (a >= 6) {
//让显示记录的rel变为1
$(".CRselectValue").attr("rel", 1);
//让第一个显示选中样式
$("a[rel=1]").addClass("selected");
//让最后一个失去样式
$("a[rel=6]").removeClass("selected");
} else {
//让上一个失去样式
$("a[rel=" + a.toString() + "]").removeClass("selected");

//让下一个显示样式
$("a[rel=" + c + "]").addClass("selected");

//给显示值的a标签赋给rel值，作为记录，以便知道上一次选中项
$(".CRselectValue").attr("rel", c);
}
//给其他记录赋值
setValue();
return false;
}
//判断上方向键
if (e.keyCode == 38) {
//显示下拉列表
$(".CRselectBoxOptions").show();
//计算上一个选择项
var b = a - 1;
var c = b.toString();
//判断是否为第一个
if (b <= 0) {
//赋给最后一个值
$(".CRselectValue").attr("rel", 6);
//最后一项选中
$("a[rel=6]").addClass("selected");
//第一项失去样式
$("a[rel=1]").removeClass("selected");
} else {
//上一次选中项失去样式
$("a[rel=" + a.toString() + "]").removeClass("selected");
//向上移
$("a[rel=" + c + "]").addClass("selected");
//记录本次选中项
$(".CRselectValue").attr("rel", c);
}

//给其他项赋值
setValue();
return false;
}

//当回车时，把当前选中项赋给显示，影藏列表
if (e.keyCode == 13) {
//获取当前选中值
var txt = $("a[rel=" + a.toString() + "]").not($(".CRselectValue")).text();
//赋给显示
$(".CRselectValue").text(txt);
//存储rel值
$("#abc").val(a);
//存储显示值
$("#abc_CRtext").val(txt);
//影藏列表
$(".CRselectBoxOptions").hide();
return false;
}
});
}

function setValue() {
//获取当前选中项rel
var a = parseInt($(".CRselectValue").attr("rel"));
//根据rel取得当前选中项的内容，注意去除显示项的内容
var txt = $("a[rel=" + a.toString() + "]").not($(".CRselectValue")).text();
//为显示项更换内容
$(".CRselectValue").text(txt);
//存储当前选择项的rel
$("#abc").val(a);
//存储当前选择项的内容，以后使用
$("#abc_CRtext").val(txt);

return false;
}

</script>

</head>
<body>
<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="#" rel="0">选项一</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>[/quote]

yaoxin524

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery模拟select效果

1、jQuery制作select效果，此效果可用作自动提示功能中；2、此示例包括键盘上、下合回车键的判断；3、具体看附件，包含详细注释：[quote] jQuery模拟select控件 /** Dev by CssRain.cn **/html,body,ul,li,div,a{margin:0;padding:0;font-size:12p...
复制链接

扫一扫

专栏目录