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页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
React中的render何时执行过程
Apr 13 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
vue实现评价星星功能
Jun 30 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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中hashtable实现示例分享
2014/02/13 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
两款万能的php分页类
2015/11/12 PHP
phpinfo的知识点总结
2019/10/10 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
Firebug 字幕文件JSON地址获取代码
2009/10/28 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python Xpath语法的使用
2020/11/26 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
员工工作表现自我评价
2015/03/06 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang
实战Python爬虫爬取酷我音乐
2022/04/11 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android