<head runat="server">

    <title>无标题页</title>

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

    <script type="text/javascript">

        $(document).ready(function(){

            // 把选择项追加给对方

            $('#add').click(function(){

            var options=$('#select1 option:selected');

            var remove=options.remove();

            remove.appendTo("#select2");

            });

            // 把所有项追加给对方

            $('#addAll').click(function(){

            var options=$('#select1 option');

            var remove=options.remove();

            remove.appendTo("#select2");

            });

            // 把选择项退回给对方

            $('#remove').click(function(){

            var options=$('#select2 option:selected');

            var remove=options.remove();

            remove.appendTo("#select1");

            });

            // 把全部项退回给对方

            $('#removeAll').click(function(){

            var options=$('#select2 option');

            var remove=options.remove();

            remove.appendTo("#select1");

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="left">

        <select multiple="multiple" id="select1" style="width:100px;height:160px">

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

        <option>选项4</option>

        <option>选项5</option>

        </select>

    </div>

    <div>

        <span id="add">选中项添加至右边>></span><br />

        <span id="addAll">全部添加到右边>></span>

    </div>

    <div id="right">

        <select multiple="multiple" id="select2" style="width:100px;height:160px"></select>

    </div>

    <div>

        <span id="remove"><<选中项还原至左边</span><br />

        <span id="removeAll"><<全部还原至左边</span>

    </div>

    </form>

</body>

Jquery多选框互相内容交换的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

  3. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  4. jQuery清除文本框，内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  5. Jquery复选框

    Jquery复选框 1.checkbox list选择 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  6. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

  7. Jquery中复选框选中取消实现文本框的显示隐藏

    标签内容 <div class="box"> 请编写javascript代码,完成如下功能要求:<br /> 1.取消复选款后,要求促销价格.促销开始结束日 ...

  8. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  9. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

随机推荐

  1. 百度API从经纬度坐标到地址的转换服务

    /// <summary> /// 百度API从经纬度坐标到地址的转换服务 /// </summary> /// <param name="lng"& ...

  2. all.css

    @charset "utf-8"*{-webkit-tap-highlight-color:rgba(0,0,0,0); padding:0; margin:0;}body{ fo ...

  3. 并不对劲的loj3048:p5283:[十二省联考]异或粽子

    题目大意 有\(n\)(\(n\leq5\times10^5\))个数\(a_1,a_2,...a_n\)(\(a_i\leq 2^{32}-1\)) 求区间异或和前\(k(k\leq2\times1 ...

  4. SPOJ Find the max XOR value（二进制，贪心即可）

    You have two integers L and R, and you are required to find the max xor value of a and b where L < ...

  5. 「USACO16OPEN」「LuoguP3146」248（区间dp

    题目描述 Bessie likes downloading games to play on her cell phone, even though she doesfind the small to ...

  6. 【旧文章搬运】加载PE文件时IAT的填充时机

    原文发表于百度空间,2011-06-20========================================================================== 大致过程如 ...

  7. HDU-2617

    Happy 2009 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. 揭开 iOS 7 之 Multipath TCP 的面纱(转)

    看到中文圈似乎讨论 iOS 7 的这个特性的还不多,于是我稍微研究了一下这个「Mutlipath TCP」,写点心得.过程是这样的: Olivier Bonaventure 通过 Wireshark ...

  9. Flutter实战视频-移动电商-29.列表页_商品列表数据模型建立

    29.列表页_商品列表数据模型建立 简历数据模型 json生成dart类的网站: https://javiercbk.github.io/json_to_dart/ json数据 {",&q ...

  10. 剑指offer面试题：输入某二叉树的前序遍历和中序遍历，输出后序遍历

    二叉树的先序,中序,后序如何遍历,不在此多说了.直接看题目描述吧(题目摘自九度oj剑指offer面试题6): 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结 ...