使用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控制css中的float的代码
Aug 16 Javascript
Jquery焦点图实例代码
Nov 25 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
JavaScript实现两个数组的交集
Mar 25 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP中ob_start函数的使用说明
2013/11/11 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
python实现ip查询示例
2014/03/26 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
运动会开幕式主持词
2014/03/28 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
平安建设工作方案
2014/06/02 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
针对吵架老公保证书
2015/05/08 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
2016年教代会开幕词
2016/03/04 职场文书
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS