需求

　

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

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

代码实现

 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. 【k8s中无法使用jstack和arthas的解决方案】1: Unable to get pid of LinuxThreads manager thread

    使用alpine镜像,jstack和arthas等无法连接到pid为1的java进程 k8s容器中执行结果 / # jstack 1 1: Unable to get pid of LinuxThre ...

  2. 一文带你看懂HarmonyOS应用上架

    大家一直以来都很关心如何上架HarmonyOS应用,现在它来了!它终于来了! 我们为大家梳理了HarmonyOS应用从创建.调试到上架的流程和注意事项,希望能为你的上架之旅带来帮助! 一.创建/添加应 ...

  3. 三大数据库 sequence 之华山论剑 (上篇)

    前言 本文将基于以下三种关系型数据库,对 sequence (序列) 展开讨论. Oracle - 应用最广泛的商用关系型数据库 PostgreSQL - 功能最强大的开源关系型数据库 MySQL - ...

  4. 企业没有大数据技术？选择这款BI工具

    ​无论是网络时代的传统营销还是大数据营销,营销人员的任务之一就是找到目标客户,实现自己的营销目标.而我们说的大数据营销只不过是营销的工具发生了变化,营销的本质和目标是不变的. 就目前而言,现在的大数据 ...

  5. 关于GDPR的六大理解

    通用数据保护条例(GDPR)于2018年5月生效,根据法律条文,英国几乎所有企业都需要遵守该规定.然而,人们对法规本身及其对组织的意义仍存在一些误解.这可能会导致一些错误的决定. 通用数据保护条例(G ...

  6. 数据平滑处理-均值|中值|Savitzky-Golay滤波器

    均值滤波器 均值滤波器是一种使用频次较高的线性滤波器.它的实现原理很简单,就是指定一个长度大小为奇数的窗口,使用窗口中所有数据的平均值来替换中间位置的值,然后平移该窗口,平移步长为 1,继续重复上述操 ...

  7. URLEncoder和URLDecoder转码

    目前看是为了解决网络传输的中文乱码问题 import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import  ...

  8. 深入Mybatis框架

    深入Mybatis框架 学习了Spring之后,我们已经了解如何将一个类作为Bean交由IoC容器管理,也就是说,现在我们可以通过更方便的方式来使用Mybatis框架,我们可以直接把SqlSessio ...

  9. Python：Scipy.interpolate

    注意 以下插值函数中,待插值点的坐标,最好按次序排列(参与插值的基准点的坐标可以打乱次序).如果打乱顺序,可能会导致插值结果异常(插值异常而不是错误,不会报错,但是结果有明显异常). griddata ...

  10. ws请求定时

    heartChechInit() {       const _this = this;       // 设置统筹管理       let heartCheck = {         timer: ...