需求

　

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

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

代码实现

 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. Kali网络环境设置

    实验目的 掌握网卡.ssh.apache配置与开启 实验原理 在终端下,修改/etc/network/interfaces网卡文件,启动ssh和apache服务. 实验内容 网卡.ssh.apache ...

  2. C语言qsort()函数的使用

    C语言qsort()函数的使用 qsort()函数是 C 库中实现的快速排序算法,包含在 stdlib.h 头文件中,其时间复杂度为 O(nlogn).函数原型如下: void qsort(void ...

  3. CSC.exe编译器使用

    如何用CSC.exe来编译Visual C#的代码文件 Visual C#是微软公司推出的新一代程序开发语言,Visual C#是微软公司.Net FrameWork框架中的一个重要的组成部分,也是微 ...

  4. 【C# 表达式树 三】ExpressionType 节点类型种类

    // // 摘要: // 描述表达式目录树的节点的节点类型. public enum ExpressionType { // // 摘要: // 加法运算,如 a + b,针对数值操作数,不进行溢出检 ...

  5. vue结合webpack打包问题

    在使用vue开发项目时,如果要使用其单文件组件特性,必然要使用webpack或者其他打包工具打包,这里我用到的是webpack打包,首先是搭建vue环境和webpack环境,在这里遇到的一个问题是在成 ...

  6. shell脚本创建身份证号

    --作者:飞翔的小胖猪 --创建时间:2021年5月16日 --修改时间:2021年5月16日 说明 运行脚本,用户手动输入信息生成身份证号.该程序的核心在于函数模块化及select的使用. 注意:该 ...

  7. 走进第四范式：决策类AI企业的生存之道

    根据不同的应用领域,人工智能行业可以分为视觉类人工智能.语音及语义类人工智能和决策类人工智能. 通常,我们接触的都是视觉类.语音类的人工智能,它们主要用来帮助人类执行具体任务,例如人脸识别,语音控制等 ...

  8. GAN实战笔记——第六章渐进式增长生成对抗网络（PGGAN）

    渐进式增长生成对抗网络(PGGAN) 使用 TensorFlow和 TensorFlow Hub( TFHUB)构建渐进式增长生成对抗网络( Progressive GAN, PGGAN或 PROGA ...

  9. 【译】C# 11 特性的早期预览

    原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...

  10. qt（一）

    一.Qt安装 qt离线安装地址:http://download.qt.io/archive/qt/ 参考教程:https://blog.csdn.net/u013934107/article/deta ...