需求

　

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

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

代码实现

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 5 <title>Insert title here</title>

 6     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

 7     <script type="text/javascript">

 8         $(function(){

 9             $("#left1").click(function(){

10                 $("#leftSelectId option:selected:first").removeAttr("selected").appendTo($("#rightSelectId"));

11             });

12             $("#left2").click(function(){

13                 $("#leftSelectId option:selected").removeAttr("selected").appendTo($("#rightSelectId"));

14             });

15             $("#left3").click(function(){

16                 $("#leftSelectId option").removeAttr("selected").appendTo($("#rightSelectId"));

17             });

18

19             $("#right1").click(function(){

20                 $("#rightSelectId option:selected:first").removeAttr("selected").appendTo($("#leftSelectId"));

21             });

22             $("#right2").click(function(){

23                 $("#rightSelectId option:selected").removeAttr("selected").appendTo($("#leftSelectId"));

24             });

25             $("#right3").click(function(){

26                 $("#rightSelectId option").removeAttr("selected").appendTo($("#leftSelectId"));

27             });

28         });

29     </script>

30

31     <style type="text/css">

32         .textClass {

33             background-color: #ff0000;

34         }

35     </style>

36 </head>

37 <body>

38     <table>

39         <tr>

40             <td>

41                 <select id="leftSelectId" style="width:100px" multiple="multiple" size="6">

42                     <option>京东商城</option>

43                     <option>苏宁易购</option>

44                     <option>淘宝</option>

45                     <option>拼多多</option>

46                 </select>

47

48             </td>

49             <td>

50                 <input id="left1" type="button" value=">" style="width:50px"/> <br/>

51                 <input id="left2" type="button" value=">>" style="width:50px"/> <br/>

52                 <input id="left3" type="button" value=">>>" style="width:50px"/> <br/>

53

54                 <input type="button" id="right1" value="<" style="width:50px"/> <br/>

55                 <input type="button" id="right2" value="<<" style="width:50px"/> <br/>

56                 <input type="button" id="right3" value="<<<" style="width:50px"/> <br/>

57

58             </td>

59             <td>

60                 <select id="rightSelectId"  style="width:100px" multiple="multiple" size="6">

61                 </select>

62

63             </td>

64         </tr>

65     </table>

66

67 </body>

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. NSSCTF-finalrce

    菜狗的我打开题目之后,人都给我吓傻了,直接过滤的超出了我的认知  菜狗直接就枯了,这个题目其实是不难的,就是比较阴间的一个题目,审计代码,可以看到最后一行的代码"exec($url)&quo ...

  2. windows痕迹清理的基本思路和思考逻辑

    1.痕迹清理的基本概念 在渗透测试的过程结束后清理自己在从开始接触到目标计算机是开始所有操作的痕迹 2.痕迹清理的目的 为下一步的渗透测试拖延时间 提高隐蔽性 所有的痕迹清理都不是绝对的,只要和计算机 ...

  3. [旧][Android] ButterKnifeProcessor 工作流程分析

    备注 原发表于2016.05.21,资料已过时,仅作备份,谨慎参考 前言 在 [Android] ButterKnife 浅析 中,我们了解了 ButterKnife 的用法,比较简单. 本次文章我们 ...

  4. 【C#TAP 异步编程】构造函数 OOP

    原文:异步 OOP 2:构造函数 (stephencleary.com) 异步构造带来了一个有趣的问题.能够在构造函数中使用会很有用,但这意味着构造函数必须返回一个表示将来将构造的值,而不是构造的值. ...

  5. 【C# 线程 】内存模型 与Volatile

    CPU硬件有它自己的内存模型,不同的编程语言也有它自己的内存模型. 在 C# 的语言规范中 ECMA-334,对于Volatile关键字的描述: 15.5.4 Volatile fieldsWhen ...

  6. C# 使用技巧区

    1.事件中的技巧 (1)在事件发送者中,用delegate{}初始化事件.这样就不用每次在使用事件的时候判读事件是否为空了. delegate { }可以赋值给任何类型的委托.这个功能匿名方法特有的, ...

  7. IDEA 连接MySQL并使用

    IDEA 连接MySQL方式 MySQL使用命令行的形式实在是有点难受,多行书写的时候要是写错了就比较难过了,因此还是需要一个图形化的操作界面.有很多可选择方式,由于之前就下载了IDEA,其中也继承了 ...

  8. Python：matplotlib.pyplot

    翻译总结自:matplotlib.pyplot - Matplotlib 3.4.3 documentation 函数 说明 acorr x的自相关性图 angle_spectrum 角度谱 anno ...

  9. 关于 vue2.x 的 $attrs 和 $listeners

    $attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且 ...

  10. CDN网络科普小文（小说版）

    引言 作为公司 cdn 小组的一名小码仔,我为写一篇 cdn 的科普文章准备了好一段时间(大概有一个多月没有更新我的社交账号了). 在我刚进入公司,培训完,进入小组,了解到我们做的是 cdn 相关的工 ...