使用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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
Prototype Number对象 学习
Jul 19 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
网页中JS函数自动执行常用三种方法
2016/03/30 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
[02:23]2016国际邀请赛中国区预选赛wings晋级之路
2016/06/29 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python线性插值解析
2020/07/05 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html如何对span设置宽度
2019/10/30 HTML / CSS
老同学聚会感言
2014/02/23 职场文书
工作会议主持词
2014/03/17 职场文书
爱我中华演讲稿
2014/05/20 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
返乡农民工证明
2015/06/24 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
创业计划书之物流运送
2019/09/17 职场文书