使用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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
动态改变textbox的宽高的js
Oct 26 Javascript
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JS倒计时两种实现方式代码实例
Jul 27 Javascript
React实现todolist功能
Dec 28 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
php5 and xml示例
2006/11/22 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Python实现的简单dns查询功能示例
2017/05/24 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python for i in range ()用法详解
2020/09/18 Python
基于python使用tibco ems代码实例
2019/12/20 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
付款委托书范本
2014/04/04 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
安全守法证明
2015/06/23 职场文书
如何做好工作总结!
2019/04/10 职场文书
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python