Jquery实现角色左右选择特效
来源:互联网 发布:门胁麦 知乎 编辑:程序博客网 时间:2024/05/20 16:42
<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>
0 0
- Jquery实现角色左右选择特效
- jquery 实现左右选择
- jquery实现左右选择框
- 左右select选择 (jQuery实现)
- jquery实现图片左右间隔滚动特效(可自动播放)
- 使用jQuery实现点击左右滑动切换特效
- jquery实现图片左右间隔滚动特效(可自动播放)
- 用jquery+CSS实现左右选择框效果
- 用jquery实现可以左右选择的菜单效果
- jquery实现可以左右选择的下拉菜单效果
- jQuery实现select下拉框左右选择_交换内容
- jquery实现下拉框左右选择的效果
- EditView实现左右选择
- Jquery特效,左右移动选项卡
- JQuery下拉框左右选择
- jquery实现动画特效
- Unity3D 角色死亡灰屏特效实现
- js实现左右选择框
- 软考历程(6)——extend 与include 生活趣例
- 计算机行业“喧哗”背后的隐忧
- ZooKeeper的安装
- 小财不出vvnvbn
- 探寻PhoneGap的真面目
- Jquery实现角色左右选择特效
- hibernate中的几种关系映射
- Quickly creating, deploying and testing a WebService interface for ADF Business Components
- 超级强大的心理定律~~!你可以变成你想要的样子!~
- java 值传递跟引用传递在内存中怎么分配的
- Android Instrumentation 测试
- 三星GalaxyTab3 7.0(WIFI) SM-T210 刷机 ROM 教程 附带港版官方ROM
- Python中的*args和**kwargs
- Code Hunt 第一章算术篇答案