使用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 Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 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求两个文件的相对路径
2013/06/20 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
npm scripts 使用指南详解
2018/10/08 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python扩展内置类型详解
2018/03/26 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
pytorch中的inference使用实例
2020/02/20 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
2014教师年度工作总结
2014/11/10 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
民主生活会主持词
2015/07/01 职场文书
关于感恩老师的古诗句
2019/08/20 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
代码解析React中setState同步和异步问题
2021/06/03 Javascript
python字符串的多行输出的实例详解
2021/06/08 Python
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技