效果如图:

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
 <style type="text/css">
 <!--
 BODY
 {
     font-family:"Courier";
     font-size: 12px;
     margin:0px 0px 0px 0px;
     overflow-x:no;
     overflow-y:no;
     background-color: #B8D3F4;
 }
 td
 {
     font-size:12px;
 }
 .default_input
 {
     border:1px solid #666666;
     height:18px;
     font-size:12px;
 }
 .default_input2
 {
     border:1px solid #666666;
     height:18px;
     font-size:12px;
 }
 .nowrite_input
 {
     border:1px solid #849EB5;
     height:18px;
     font-size:12px;
     background-color:#EBEAE7;
     color: #9E9A9E;
 }
 .default_list
 {
     font-size:12px;
   border:1px solid #849EB5;
 }
 .default_textarea
 {
     font-size:12px;
     border:1px solid #849EB5;
 }

 .nowrite_textarea
 {
     border:1px solid #849EB5;
     font-size:12px;
     background-color:#EBEAE7;
     color: #9E9A9E;
 }

 .wordtd5 {
     font-size: 12px;
     text-align: center;
     vertical-align:top;
     padding-top: 6px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 5px;
     background-color: #b8c4f4;
 }

 .wordtd {
     font-size: 12px;
     text-align: left;
     vertical-align:top;
     padding-top: 6px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 5px;
     background-color: #b8c4f4;
 }
 .wordtd_1 {
     font-size: 12px;
     vertical-align:top;
     padding-top: 6px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 5px;
     background-color: #516CD6;
     color:#fff;
 }
 .wordtd_2{
     font-size: 12px;
     text-align: right;
     vertical-align:top;
     padding-top: 6px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 5px;
     background-color: #64BDF9;
 }
 .wordtd_3{
     font-size: 12px;
     text-align: right;
     vertical-align:top;
     padding-top: 6px;
     padding-right: 5px;
     padding-bottom: 3px;
     padding-left: 5px;
     background-color: #F1DD34;
 }
 .inputtd
 {
     font-size:12px;
     vertical-align:top;
     padding-top: 3px;
     padding-right: 3px;
     padding-bottom: 3px;
     padding-left: 3px;
 }
 .inputtd2
 {
     text-align: center;
     font-size:12px;
     vertical-align:top;
     padding-top: 3px;
     padding-right: 3px;
     padding-bottom: 3px;
     padding-left: 3px;
 }
 .tablebg
 {
     font-size:12px;
 }

 .tb{
     border-collapse: collapse;
     border: 1px outset #999999;
     background-color: #FFFFFF;
 }
 .td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
 .td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
 .td4{background-color:#F6F6F6;line-height:20px;}
 .td5{border:#000000 solid;
        border-right-width:0px;
        border-left-width:0px;
        border-top-width:0px;
        border-bottom-width:1px;}

 .tb td{
 font-size: 12px;
 border: 2px groove #ffffff;
 }

 .noborder {
     border: none;
 }

 .button {
     border: 1px ridge #ffffff;
     line-height:18px;
     height: 20px;
     width: 45px;
     padding-top: 0px;
     background:#CBDAF7;
     color:#000000;
     font-size: 9pt;
     font-family:"Courier";
 } 

 .textarea {
     font-family: Arial, Helvetica, sans-serif, "??";
     font-size: 9pt;
     color: #000000;
     border-bottom-width: 1px;
     border-top-style: none;
     border-right-style: none;
     border-bottom-style: solid;
     border-left-style: none;
     border-bottom-color: #000000;
     background-color:transparent;
     text-align: left
 }
 -->
 </style></head>

 <body>

 <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
 <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
   <tr>
     <td width="126">
         <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
         <select name="first" multiple="multiple" size=10 class="td3" id="first">
           <option value="选项1">选项1</option>
           <option value="选项2">选项2</option>
           <option value="选项3">选项3</option>
           <option value="选项4">选项4</option>
           <option value="选项5">选项5</option>
           <option value="选项6">选项6</option>
           <option value="选项7">选项7</option>
           <option value="选项8">选项8</option>
         </select>
     </td>
     <td width="69" valign="middle">
        <input name="add"  id="add" type="button" class="button" value="-->" />
        <input name="add_all" id="add_all"  type="button" class="button" value="==>" />
        <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
        <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
         </td>
     <td width="127" align="left">
       <select name="second" size="10" multiple="multiple" class="td3" id="second">
          <option value="选项9">选项9</option>
       </select>
     </td>
   </tr>
 </table>
 </div>
 </body>
 <script type="text/javascript">
        //<input name="add"  id="add" type="button" class="button" value="-->" />
        $("#add").click(function(){
                $("#first>option:selected").appendTo($("#second"));
        });

        //<input name="add_all" id="add_all"  type="button" class="button" value="==>" />
        $("#add_all").click(function(){
                $("#first>option").appendTo($("#second"));
        });

        //<input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
        $("#remove").click(function(){
                $("#second>option:selected").appendTo($("#first"));
        })

        //<input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
         $("#remove_all").click(function(){
                $("#second>option").appendTo($("#first"));
        });

         $("#first").dblclick(function(){
             $("#first>option:selected").appendTo($("#second"));
         });
         $("#second").dblclick(function(){
             $("#second>option:selected").appendTo($("#first"));
         });

 </script>
 </html>

jQuery两个列表中元素相互交换Demo的更多相关文章

  1. python 判断两个列表中相同和不同的元素

    背景: 在做接口自动化时,通常会判断接口返回中的数据信息,与数据库中返回的数据信息是否一致,比如:将接口返回信息的用户姓名存放到一个列表中,将数据库返回的用户姓名存放到另一个列表中,这时需要判断两个列 ...

  2. python：找出两个列表中相同和不同的元素(使用推导式)

    #接口返回值 list1 = ['张三', '李四', '王五', '老二'] #数据库返回值 list2 = ['张三', '李四', '老二', '王七'] a = [x for x in lis ...

  3. #查找列表中元素，移除每个元素的空格，并查找以 a或A开头 并且以 c 结尾的所有元素

    #!/usr/bin/env python #查找列表中元素,移除每个元素的空格,并查找以 a或A开头 并且以 c 结尾的所有元素. #    li = ["alec", &quo ...

  4. python中循环删除列表中元素时的坑！

    循环删除列表中元素时千万别用正序遍历,一定要用反序遍历! 废话不多说,先上案例代码: def test(data): for i in data: data.remove(i) return data ...

  5. python删除列表中元素的方法

    删除列表中元素的三种方法-remove.pop.del 1 1.remove: 删除单个元素,删除首个符合条件的元素,按值删除 2 举例说明: 3 >>> str=[1,2,3,4, ...

  6. 布尔上下文，这里misreading返回的是来源列表中元素的个数，如果列表中2个值都是undef，则列表元素个数是1： while( $misreading = (my $test_consideration, my $english_pragma) = each %map_function){

    布尔上下文,这里misreading返回的是来源列表中元素的个数, 列表赋值运算的值将会是来源列表中元素的个数,空列表表示0,如果列表中2个值都是undef,则列表元素个数是1 布尔上下文,这里mis ...

  7. JAVA实现按列表中元素的时间字段排序

    JAVA代码实现按列表中元素的时间字段排序 导语: 工作中遇到一个问题,调用第三方接口返回的数据没有按时间倒序排列,测试说要加,然后在网上找到一个解决办法,这里记录一下 需求: 如下图列表,按生日进行 ...

  8. for循环删除列表中元素遇到的漏删的问题（python）

    问题描述:python中通过for循环来删除列表中的两个相邻的元素,存在漏删的问题 比如说下面的例子,准备删掉2和3,但是结果是2删掉了,3没删掉 是因为把2删掉后3的下标就变成了1,但是原本下标为1 ...

  9. python中列表中元素的增删改查

    增: append : 默认添加到列表的最后一个位置 insert : 可以通过下标添加到列表的任意位置 extend: a.extend[b] --将b列表的元素全加入到列表b中 删; remove ...

随机推荐

  1. [转]vector iterator not incrementable 的问题

    转自:http://blog.csdn.net/kuaile123/article/details/11105115 vector::erase误使用问题: 暂时使用经验: 不能在循环中使用,否则会报 ...

  2. Java 关于 == 和 equal()的区别

    因为用new创建了两个对象,所以a和b指向两个不同的内存地址,所以返回false equal()是object的方法,所以只适用于对象,不使用于基本类型.不过equal()默认是用“==”比较两个对象 ...

  3. 转载:DIV+CSS有可能遇到的问题

    [总结]DIV+CSS有可能遇到的问题 一.超链接访问过后hover样式就不出现的问题? 被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H- ...

  4. （3）HTML ”列表“、图片和超链接

    本节解说 1. html支持的列表:无序列表.有序列表.定义列表 2. html中如何插入图片 3.html的超链接 <1> 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型 ...

  5. Correct thread terminate and destroy

    http://www.techques.com/question/1-3788743/Correct-thread-destroy Hello At my form I create TFrame a ...

  6. 关于c#中的Timer控件的简单用法

    Timer控件主要会用到2个属性一个是Enabled和IntervalEnabled主要是控制当前Timer控件是否可用timer1.Enabled=false;不可用timer1.Enabled=t ...

  7. C#综合揭秘——细说多线程

    一.线程的定义  1. 1 进程.应用程序域与线程的关系 进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法访问另一个进程 ...

  8. 车牌识别--S5PV210測试

    cortex-A8(S5PV210) Linux-3.9.7 arm-linux-gcc 4.5.1(FriendlyARM) 根文件系统:NFS 软浮点执行结果: [liujia@210]#./so ...

  9. JSP中Session的使用

    JSP session使用方法 <%@page contentType="text/html;charset=GB2312"%><html>  <he ...

  10. TP复习3

    ## ThinkPHP 3.1.2 CURD特性#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲: 一.ThinkPHP 3 的CURD介绍 (了解) 二. ...