需求

　

　　如上图，实现左右两边的选择菜单可以左右移动，‘>’按钮一次只能移动被选中的一个菜单，‘>>’按钮一次移动所有被选择的菜单，‘>>>’按钮

将所有菜单进行移动，不管是否被选择。

代码实现

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  2 <html>
  3.  3 <head>
  4.  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.  5 <title>Insert title here</title>
  6.  6     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  7.  7     <script type="text/javascript">
  8.  8         $(function(){
  9.  9             $("#left1").click(function(){
  10. 10                 $("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId"));
  11. 11             });
  12. 12             $("#left2").click(function(){
  13. 13                 $("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId"));
  14. 14             });
  15. 15             $("#left3").click(function(){
  16. 16                 $("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId"));
  17. 17             });
  18. 18
  19. 19             $("#right1").click(function(){
  20. 20                 $("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId"));
  21. 21             });
  22. 22             $("#right2").click(function(){
  23. 23                 $("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId"));
  24. 24             });
  25. 25             $("#right3").click(function(){
  26. 26                 $("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId"));
  27. 27             });
  28. 28         });
  29. 29     </script>
  30. 30
  31. 31     <style type="text/css">
  32. 32         .textClass {
  33. 33             background-color: #ff0000;
  34. 34         }
  35. 35     </style>
  36. 36 </head>
  37. 37 <body>
  38. 38     <table>
  39. 39         <tr>
  40. 40             <td>
  41. 41                 <select id="leftSelectId" style="width:100px" multiple="multiple" size="6">
  42. 42                     <option>京东商城</option>
  43. 43                     <option>苏宁易购</option>
  44. 44                     <option>淘宝</option>
  45. 45                     <option>拼多多</option>
  46. 46                 </select>
  47. 47
  48. 48             </td>
  49. 49             <td>
  50. 50                 <input id="left1" type="button" value=">" style="width:50px"/> <br/>
  51. 51                 <input id="left2" type="button" value=">>" style="width:50px"/> <br/>
  52. 52                 <input id="left3" type="button" value=">>>" style="width:50px"/> <br/>
  53. 53
  54. 54                 <input type="button" id="right1" value="<" style="width:50px"/> <br/>
  55. 55                 <input type="button" id="right2" value="<<" style="width:50px"/> <br/>
  56. 56                 <input type="button" id="right3" value="<<<" style="width:50px"/> <br/>
  57. 57
  58. 58             </td>
  59. 59             <td>
  60. 60                 <select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">
  61. 61                 </select>
  62. 62
  63. 63             </td>
  64. 64         </tr>
  65. 65     </table>
  66. 66
  67. 67 </body>
  68. 68 </html>

jQuery--文档处理案例的更多相关文章

  1. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  2. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  3. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  4. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  5. jQuery文档操作方法对比和src写法

    jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. jQuery文档就绪事件

    [jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...

  7. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  8. jquery文档加载几种写法，图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

  9. jQuery 文档操作 - prependTo() ，appendTo()方法

    其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...

  10. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

随机推荐

  1. Linux系列——配置SSH免密登录

    ​ 在进行配置之前需要先关闭防火墙.配置hosts映射. 具体参见:Linux系列--常规基础操作 下面重点说明如何配置SSH: 1.编辑sshd服务配置文件,开启免密验证, vi /etc/ssh/ ...

  2. [转自Matrix67] 趣题：顶点数为多少的图有可能和自己互补

    若干个顶点以及某些顶点和顶点之间的连线,就构成了一个"图".如果对某个图进行变换,使得原来任意两个有连线的顶点之间都不再有连线,原来任意两个没有连线的顶点之间现在都有连线了,那么所 ...

  3. 网络测试技术——802.1X_MD5认证（下篇）

    上篇我们讲到802.1X_MD5的简介.认证过程.测试组网以及测试环境准备,本期我们将为大家带来测试的详细步骤: 六.测试仪配置 1.占用端口 端口功能 (1)端口1用来模拟DOT1X和发送流量 (2 ...

  4. Ocelot和IdentityServer4初体验

    Ocelot是一个用.NET Core实现的开源API网关技术.IdentityServer4是一个基于OpenID Connect和OAuth2.0的针对ASP.NET Core的框架,以中间件的形 ...

  5. 释放linux内存中的cache缓存

    echo 3 > /proc/sys/vm/drop_caches 记一次 经常用  exp 导出oracle全量数据库,发现linux内存一直在减小没有释放,即使 oracle重启也不行,只有 ...

  6. Pandas：将DataFrame中的一列转化为List

    #假设data是一个DataFrame对象,如果要把它的第二列转换为List print(data.iloc[:,1].to_list())

  7. Chrome：F12开发者模式下console不打印信息

    控制台不打印信息的解决方法 你要看看你是否在之前进行过查找关键字操作,操作之后忘记删去这个关键字,导致console中只会留下对于该关键字的查询结果.

  8. 《MySQL实战45讲》个人笔记-基础篇

    拜读了林晓斌大佬的<MySQL实战45讲>,特意做个知识点总结,以便后期回忆. 01.基础架构:一条SQL查询语句是如何执行的? Server 层包括连接器.查询缓存.分析器.优化器.执行 ...

  9. laravel 实现详情分页

    选择合适的PHP框架及前端框架布局页面(10分) 首先展示出分类列表,每个分类下只显示3条信息,无需分页 (30分) 在列表页 点击文章标题进入详细页面,对应的文章点击量+1(30分) 在详细页面点击 ...

  10. 2022年官网下安装Logstash最全版与官网查阅方法（8.1.0最新安装）

    一.环境整合 构建工具(参考工具部署方式) 软件名称 版本 相关文章推荐 NodeJS 16.0.0 https://www.cnblogs.com/liuyangfirst/p/15998172.h ...