左右选择添加、删除菜单内容。运行后的效果图片:
运行前请引入jquery。
<html> <head> <title>左右选择添加、删除菜单内容</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script> <style type="text/css"> .Left{float:left; margin:0px 20px 0px 20px;} .Right{float:left;overflow:hidden;margin-left:20px;} .Center{float:left;margin:0px 10px 0px 10px;} div.Center ,div.Right ,div.Left {margin-top:20px;} .select{width:140px;height:200px;} </style> <script type="text/javascript"> $(function(){ //移到右边 $('#add').click(function() { //获取选中的选项,删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function() { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function() { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }); </script> </head> <body> <div class="main"> <div class="Left"> <select multiple="multiple" id="select1" class="select"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="8">选项8</option> <option value="9">选项9</option> <option value="10">选项10</option> <option value="11">选项11</option> <option value="12">选项12</option> <option value="13">选项13</option> <option value="14">选项14</option> </select> </div> <div class="Center"> <div> <input type="button" value="选择>" id="add"/><br/><br/> <input type="button" value="全部添加>>" id="add_all"/> </div><br/><br/> <div> <input type="button" value="<删除" id="remove"/><br/><br/> <input type="button" value="全部删除>>" id="remove_all"/> </div> </div> <div class="Right"> <select multiple="multiple" id="select2" class="select"> <option value="7">选项7</option> </select> </div> <div> </body> </html>
相关推荐
超强的左右选择添加删除内容菜单网页特效,选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。功能强大额网页特效啊!
选择左右添加删除内容菜单.rar选择左右添加删除内容菜单.rar选择左右添加删除内容菜单.rar选择左右添加删除内容菜单.rar选择左右添加删除内容菜单.rar选择左右添加删除内容菜单.rar
jQuery穿梭框左右列表添加删除代码,支持多选和全选,选中列表选项后点击左右箭头按钮控制列表选项左右转移。
1、采用WPF; 2、支持菜单栏,工具栏; 3、标题栏可修改背景色; 4、TabControl动态添加、删除(支持左右滑动,选择)
jQuery左右列表添加删除代码是一款点击需要勾选的左右箭头按钮控制穿梭框列表代码。
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动...
左右添加删除模板
javascript动态添加或删除菜单(select)。
jQuery左右列表添加删除代码是一款点击需要勾选的左右箭头按钮控制穿梭框列表代码。
TableLayout,实现动态添加和删除行,判断行中的数据是否含有空值,可以手动地输入数据,也可以选择数据添加在表格中,并实现统计表格中的数据。
RecyclerView之添加头部、尾部和左滑显示删除按钮并删除Item;有添加头部的左右删除Item,有添加头部和尾部的左滑删除item.
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
NULL 博文链接:https://congdepeng.iteye.com/blog/421642
网易新闻手机端首页,添加,删除标签,滑动标签动态下标效果,图片循环自动切换,手动左右循环切换UIScrollView图片