<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 <html>

   <head>

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

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

   </head>

   <body>

       <div>

           <select style="width:60px" multiple size="10" id="leftID">

               <option>选项A</option>

               <option>选项B</option>

               <option>选项C</option>

               <option>选项D</option>

               <option>选项E</option>

               <option>选项F</option>

               <option>选项G</option>

               <option>选项H</option>

               <option>选项I</option>

               <option>选项J</option>

           </select>

       </div>

       <div style="position:absolute;left:100px;top:60px">

           <input type="button" value="批量右移" id="rightMoveID"/>

       </div>

       <div style="position:absolute;left:100px;top:90px">

           <input type="button" value="全部右移" id="rightMoveAllID"/>

       </div>

       <div style="position:absolute;left:220px;top:20px">

           <select multiple size="10" style="width:60px" id="rightID">

           </select>

       </div>

   </body>

   <script type="text/javascript">

       //双击右移

       $("#leftID").dblclick(function(){

           $("#rightID").append(  $("#leftID option:selected")  );

       });

       //全部右移

       $("#rightMoveAllID").click(function(){

           $("#rightID").append(  $("#leftID option")  );

       });

       //批量右移

       $("#rightMoveID").click(function(){

           $("#rightID").append(   $("#leftID option:selected")  );

       });

   </script>

 </html>

jquery实现 批量右移的更多相关文章

  1. jQuery实现左移右移

    <html> <head> <meta charset="utf-8"> <title>完成左移右移</title> & ...

  2. jquery文件批量上传控件Uploadify3.2(java springMVC)

    人比較懒  有用为主 不怎么排版了 先放上Uploadify的官网链接:http://www.uploadify.com/  -->里面能够看到PHP的演示样例,属性说明,以及控件下载地址.分f ...

  3. Jquery+Aajax 批量上传

    注:转载请标明文章原始出处及作者信息 网上有现成的Uploadify.WebUpload等插件,自己写一个简单的(非插件). 1.页面 批量上传页面 <form action="&qu ...

  4. jquery之批量上传图片

    //var btn; /** * * 获取当前时间 */ ==================================js=================================== ...

  5. jQuery的DOM操作小案例

    案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10 ...

  6. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

  7. jquery插件artTxtCount输入字数限制,并提示剩余字数

    工作中用到,需要批量处理下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  8. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

  9. 什么是jQuery？

    目录 一:jQuery 1.jQuery介绍 2.jQuery的宗旨 3.有了jQuery那我们还使用BOM与DOM吗? 4.jQuery的优势 5.python与jQuery导入(复习) 6.jQu ...

随机推荐

  1. hdu 3123 GCC (2009 Asia Wuhan Regional Contest Online)

    GCC Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Subm ...

  2. DIV元素不换行

    DIV盒子默认是换行独占100%宽度:DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100%). 如下默认情况HTML代码: <!DOCTYPE html> <ht ...

  3. java.lang.ClassNotFoundException: Didn&#39;t find class &quot;stu.love.neihan.MainActivity&quot; on path: DexPathL

    java.lang.ClassNotFoundException: Didn't find class "stu.love.neihan.MainActivity" on path ...

  4. LZO 使用和介绍

    LZO说明 摘要 LZO 是一个用 ANSI C 语言编写的无损压缩库.他能够提供非常快速的压缩和解压功能.解压并不需要内存的支持.即使使用非常大的压缩比例进行缓慢压缩出的数据,依然能够非常快速的解压 ...

  5. DeDeCMS(织梦)变量覆盖0day getshell

    测试方法: @Sebug.net   dis本站提供程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负! #!usr/bin/php -w <?php error_reporting( ...

  6. 简单MapReduce思维导图

  7. JavaScript游戏中的面向对象的设计

    简介: 从程序角度考虑,许多 JavaScript 都基于循环和大量的 if/else 语句.在本文中,我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计.本文将概述原 ...

  8. hdu 5326

    Work Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  9. [置顶] 利用Global.asax的Application_BeginRequest 实现url 重写 无后缀

    利用Global.asax的Application_BeginRequest 实现url 重写 无后缀 <%@ Application Language="C#" %> ...

  10. 如何做windows server 2008 R2 的磁盘清理

    参考如下的链接: https://technet.microsoft.com/en-us/library/ff630161(v=ws.10).aspx 运行后可能没有啥反应,磁盘空间也没增大.那是因为 ...