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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JavaScript中CreateTextFile函数
Aug 30 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
PHP 验证码的实现代码
2011/07/17 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
php文件包含的几种方式总结
2019/09/19 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
js中的setInterval和setTimeout使用实例
2014/05/09 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
vue中rem的配置的方法示例
2018/08/30 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
python实现简单温度转换的方法
2015/03/13 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python decimal模块使用方法详解
2020/06/08 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
西北政法大学自主招生自荐信
2014/01/29 职场文书
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL