Jquery实现的角色左右选择特效


Posted in Javascript onMay 21, 2014
<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>
Javascript 相关文章推荐
用javascript实现读取txt文档的脚本
Jul 20 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
javascript if条件判断方法小结
May 17 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
JS原型链怎么理解
Jun 27 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
jquery $.trim()方法使用介绍
May 21 #Javascript
JS控制输入框内字符串长度
May 21 #Javascript
javascript学习笔记之10个原生技巧
May 21 #Javascript
jquery实现预览提交的表单代码分享
May 21 #Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 #Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 #Javascript
Jquery的each里用return true或false代替break或continue
May 21 #Javascript
You might like
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
一个网马的tips实现分析
2010/11/28 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
销售辞职报告范文
2014/01/12 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
化学教育专业自荐信
2014/07/04 职场文书
爬山的活动方案
2014/08/16 职场文书
私人委托书格式
2014/09/10 职场文书
医者仁心观后感
2015/06/17 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL