使用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代码
Apr 23 Javascript
基于jQuery的图片大小自动适应实现代码
Nov 17 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
关于网页中的无缝滚动的js代码
Jun 09 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
React服务端渲染原理解析与实践
Mar 04 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 URL编码解码函数代码
2009/03/10 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Python之修改图片像素值的方法
2019/07/03 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
顶撞老师检讨书
2014/02/07 职场文书
语文教学随笔感言
2014/02/18 职场文书
劳模先进事迹材料
2014/12/24 职场文书
黄山导游词
2015/01/31 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技