使用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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
javascript实现放大镜功能
Dec 09 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-MySQL教程归纳总结
2008/06/07 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php时间计算相关问题小结
2016/05/09 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python pytest进阶之fixture详解
2019/06/27 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
护士专业推荐信
2013/11/02 职场文书
法律六进活动方案
2014/03/13 职场文书
开工仪式主持词
2014/03/20 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
工作说明书格式
2014/07/29 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
结婚老公保证书
2015/02/26 职场文书