需求

　

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

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

代码实现

 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. 『德不孤』Pytest框架 — 4、Pytest跳过测试用例

    目录 1.无条件跳过skip 2.有条件跳过skipif 3.练习 自动化测试执行过程中,我们常常出现这种情况:因为功能阻塞,未实现或者环境有问题等等原因,一些用例执行不了, 如果我们注释掉或删除掉这 ...

  2. Meterpreter后渗透阶段之远程桌面开启

    实验目的 学习利用Meterpreter后渗透阶段模块来开启靶机远程桌面 实验原理 利用Meterpreter生成木马,利用木马控制靶机进行远程桌面的攻击 实验内容 利用Meterpreter后渗透阶 ...

  3. RENIX报文两个字段嵌套变化——网络测试仪实操

    RENIX软件如何实现报文中两个字段嵌套变化,以下为您实操讲解详细步骤. 1.打开Renix软件,连接机框并预约测试端口: 2.创建一条RAW流量(Binding流量也可以,这里用RAW流做例子) 3 ...

  4. vs2019 NuGet安装及简单使用

    Nuget介绍 官网定义:NuGet是.NET的软件包管理器(免费).NuGet客户端工具提供了生成和使用软件包的能力.NuGet Gallery 是所有软件包作者和消费者都使用的中央软件包存储库. ...

  5. Python实现JSON序列化和反序列化

    在我的应用中,序列化就是把类转成符合JSON格式的字符串,反序列化就是把JSON格式的字符串转换成类.C#的话直接用Newtonsoft.JSON就可以了,非常好用.本来以为python也会有类似的库 ...

  6. win7下安装docker toolbox

    我的笔记本是win10系统,上面安装docker非常简单.只要在官网下载然后一路next就可以了.然而办公室的电脑装的是win7,我也懒得给它换win10.没想到,win7下安装docker这么费劲. ...

  7. JAVA只要掌握内部类，多继承和单继承都不是问题

    摘要:如果实现java的多继承,其实很简单,关键是对于内部类的特征的掌握,内部类可以继承一个与外部类无关的类,保证了内部类天然独立性,根据这个特性从而实现一个类可以继承多个类的效果. 本文分享自华为云 ...

  8. Spring 5 , 狭义上的spring 以及 广义上的spring , spring 设计模式

    Spring 5 距离 Spring4 发布有4年多, 所以说Spring 5是一个重要的版本 要构建和运行Spring 5应用程序, 至少需要Java EE 7 和JDK 8 , 之前的JDK和Ja ...

  9. 【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程

    ✿ 阅读源码思路: 先跳过非重点,深入每个方法,进入的时候可以把整个可以理一下方法的执行步骤理一下,也可以,理到某一步,继续深入,回来后,接着理清除下面的步骤. ✿ 阅读本文的准备工作,预习一下Spr ...

  10. redis存储token

    redis存储token 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章http://www.javaman.cn/sb2/redis-token 在实际开发中,token需要保 ...