使用jquery实现select添加实现后台权限添加的效果


Posted in Javascript onMay 28, 2011

呃。其实很简单的东西啦。页面的图

两个列表都可以多选,

实现如下效果:

1、双击第一个列表中任意一个列表项,实现向下添加

2、双击第二个列表中任意一个列表项,实现删除,

2、点击按钮,实现对应功能。

使用jquery实现select添加实现后台权限添加的效果

Html代码

<form name="form1" method="post" action=""> 
<select id="select1" size="5" multiple style="width:100px " > 
<option value="111">北京</option> 
<option value="222">上海</option> 
<option value="333">广州</option> 
<option value="333">山东</option> 
<option value="333">常州</option> 
</select><br/><br/> 
<input type="button" id="button1" value="添加"> 
<input type="button" id="button2" value="删除"><br/><br/> 
<select id="select2" size="5" multiple style="width:100px " > </select> 
</form>

jquery代码
<script src="js/jquery-1.6.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#select1").dblclick(function () { $("#select1 :selected").appendTo($("#select2")); }); 
$("#select2").dblclick(function () { $("#select2 :selected").appendTo($("#select1")); }); 
$("#button1").click(function () { $("#select1 option:selected").appendTo($("#select2")); }); 
$("#button2").click(function () { $("#select2 option:selected").appendTo($("#select1")); }); 
}) 
</script>

Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
javascript实现表单验证
Jan 29 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
three.js中3D视野的缩放实现代码
Nov 16 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 #Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 #Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 #Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 #Javascript
actionscript与javascript的区别
May 25 #Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 #Javascript
JavaScript EasyPager 分页函数
May 25 #Javascript
You might like
php生成文件
2007/01/15 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
javascript 关闭IE6、IE7
2009/06/01 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python网页解析器使用实例详解
2020/05/30 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
农村文化活动总结
2014/08/28 职场文书
同学聚会开幕词
2019/04/02 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
php去除deprecated的实例方法
2021/11/17 PHP
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis