使用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 相关文章推荐
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
js实现简易计算器小功能
Nov 18 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
PHP新手上路(十一)
2006/10/09 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
js 对象是否存在判断
2009/07/15 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
python验证码图片处理(二值化)
2019/11/01 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
三方合作协议书范本
2014/04/18 职场文书
大学三年计划书范文
2014/04/30 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python