使用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 键盘keyCode键码值表
Dec 24 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
fastadmin中调用js的方法
May 14 Javascript
js实现百度淘宝搜索功能
Feb 17 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 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
django框架如何集成celery进行开发
2017/05/24 Python
python 编写简单网页服务器的实例
2018/06/01 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
关于Python错误重试方法总结
2021/01/03 Python
python 制作网站小说下载器
2021/02/20 Python
html5的localstorage详解
2017/05/09 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
影视动画专业个人的自我评价
2013/12/31 职场文书
创业女性典型材料
2014/05/02 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书