使用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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery.each使用详解
Jul 07 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 Javascript
Vue js with语句原理及用法解析
Sep 03 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python 实现识别图片上的数字
2019/07/30 Python
python单例设计模式实现解析
2020/01/07 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
应届生高等护理求职信
2013/10/12 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
政治表现评语
2014/05/04 职场文书
通信工程求职信
2014/07/16 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
导师对论文的学术评语
2015/01/04 职场文书
离职感谢信怎么写
2015/01/22 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
python基础之错误和异常处理
2021/10/24 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS