需求

　

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

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

代码实现

 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. gc垃圾回收算法原理

    目录 三色标记法 标记-清扫(Mark And Sweep)算法 标记-清扫(Mark And Sweep)算法存在什么问题? 三色并发标记法 gc和用户逻辑如何并行操作? 进程新生成对象的时候,GC ...

  2. 快来用这款BI分析工具，摆脱数据分析的困扰

    ​互联网.物联网时代,数据激增是正常现象,但这给公司信息部门和数据分析师带来了巨大的工作量.根据以前的分析方法,有必要详细而深入地完成分析报告,即使借助数据分析工具,也要花费大量的时间和人力,更不用说 ...

  3. DT时代，优秀的BI工具应该具备哪些功能

    马云曾在一次演讲中说:"人类正从IT时代走向DT时代."那DT究竟是什么,和IT有什么不同呢?我们对IT非常熟悉,它是信息技术(InformationTechnology)的英文缩 ...

  4. 【C# 线程】优先级反转与优先级继承

    什么是优先级反转(翻转)优先级反转,是指在使用信号量时,可能会出现的这样一种不合理的现象,即:    高优先级任务被低优先级任务阻塞,导致高优先级任务迟迟得不到调度.但其他中等优先级的任务却能抢到CP ...

  5. kippo: 一款强大的SSH蜜罐工具

    Kippo的安装 git clone https://github.com/desaster/kippo.git # 无法运行git命令,请先安装 yum -y install git由于我使用这个命 ...

  6. SpringBoot进阶教程(七十三)整合elasticsearch

    Elasticsearch 是一个分布式.高扩展.高实时的搜索与数据分析引擎.它能很方便的使大量数据具有搜索.分析和探索的能力.充分利用Elasticsearch的水平伸缩性,能使数据在生产环境变得更 ...

  7. Qt：QSqlQuery

    0.说明 QSqlQuery提供了执行SQL代码的方法. QSqlQuery封装了在QSqlDatabase中查询.检索数据的相关函数.它可以用来执行如SELECT.INSERT.UPDATE.DEL ...

  8. matplotlib.lines.Line2D at 0x328fc10 解决方法

    在plt.plot(Y,X)代码前加一句plt.figure()即可

  9. Tableau学习Step3——数据的连接与基本图形的制作

    Tableau学习Step3--数据的连接与基本图形的制作 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau知识 案例概述 Nort ...

  10. 【转载】深入浅出SQL Server中的死锁

    essay from:http://www.cnblogs.com/CareySon/archive/2012/09/19/2693555.html 简介 死锁的本质是一种僵持状态,是多个主体对于资源 ...