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最新动画教程+iso光盘下载
Jan 22 Javascript
JS Array对象入门分析
Oct 30 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
vue的$http的get请求要加上params操作
Nov 12 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
WINXP下apache+php4+mysql
2006/11/25 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php 类中的常量、静态属性、非静态属性的区别
2017/04/09 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
js版本A*寻路算法
2006/12/22 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
求职信范文怎么写
2014/01/29 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
预备党员的自我评价
2014/03/12 职场文书
婚礼主持词
2014/03/13 职场文书
论文答辩开场白大全
2015/05/27 职场文书
小学课改工作总结
2015/08/13 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python