使用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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
详解python读取image
2019/04/03 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
20年同学聚会邀请函
2014/02/04 职场文书
五年级音乐教学反思
2014/02/06 职场文书
社区义诊活动总结
2014/04/30 职场文书
给老婆道歉的话
2015/01/20 职场文书
2015年暑假生活总结
2015/07/13 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技