使用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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
javascript添加前置0(补零)的几种方法
Jan 05 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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的计数器程序
2006/10/09 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
PHP中串行化用法示例
2016/11/16 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
js CSS操作方法集合
2008/10/31 Javascript
javascript 写类方式之三
2009/07/05 Javascript
js更优雅的兼容
2010/08/12 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python logging模块原理解析及应用
2020/08/13 Python
田径运动会通讯稿
2014/09/13 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
入股协议书范本
2014/11/01 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers