Jquery实现的角色左右选择特效
更新时间：2014年05月21日 11:48:28 作者：
这篇文章主要介绍了Jquery实现的角色左右选择特效,需要的朋友可以参考下
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现角色左右选择特效</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.selectbox{width:500px;height:220px;margin:40px auto 0 auto;}
.selectbox div{float:left;}
.selectbox .select-bar{padding:0 20px;}
.selectbox .select-bar select{
width:150px;height:200px;border:4px #A0A0A4 outset;padding:4px;
}
.selectbox .btn{width:50px; height:30px; margin-top:10px; cursor:pointer;}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//移到右边
$('#add').click(function(){
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function(){
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function(){
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function(){
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="selectbox">
<div class="select-bar">
<select multiple="multiple" id="select1">
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</option>
<option value="资源管理员">资源管理员</option>
<option value="管理员">管理员</option>
</select>
</div>
<div class="btn-bar">
<span id="add"><input type="button" class="btn" value=">"/></span><br />
<span id="add_all"><input type="button" class="btn" value=">>"/></span><br />
<span id="remove"><input type="button" class="btn" value="<"/></span><br />
<span id="remove_all"><input type="button" class="btn" value="<<"/></span>
</div>
<div class="select-bar"><select multiple="multiple" id="select2"></select></div>
</div>
</body>
</html>
相关文章
这篇文章主要介绍了JQuery查找DOM节点的方法,实例分析了jQuery选择器实现DOM元素结点与属性结点的查找技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JQuery基础动画操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
这篇文章主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了jQuery深拷贝Json对象的简单实现方法,以简单示例形式分析了jQuery深拷贝的操作技巧,需要的朋友可以参考下2016-07-07
本文给大家分享的是使用jQuery插件Boxscroll来实现简单的图片轮播特效的代码，非常简单实用，有需要的小伙伴可以参考下。2015-07-07
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。接下来通过本文给大家介绍JQuery EasyUI的使用，对jquery easyui相关知识感兴趣的朋友一起学习吧2016-02-02
这篇文章主要为大家详细介绍了jQuery实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
本篇文章主要介绍了jQuery tip提示插件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
这篇文章主要介绍了使用jQuery mobile NuGet让你的网站在移动设备上同样精彩，使用jQuery mobile NuGet包，改变共享的布局和视图，并使你的网站在传统的浏览器和大部分手机展现的都很好。,需要的朋友可以参考下2019-06-06
ScrollToFixed (jquery Fixed plugin)能够让网页的导航或表头等固定在顶部或底部，让用户更方便的操作或查看信息。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等等。2015-04-04
最新评论