<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. codeforces B. Calendar 解题报告

    题目链接:http://codeforces.com/problemset/problem/304/B 题目意思:给出两个日期,需要算出这两个日期之间有多少日. 细心模拟就可以了.特别要注意的是,两个 ...

  2. 什么是HTTP协议？

    HTTP协议(超文本传输协议)位于TCP/IP协议栈的应用层.传输层采用面向连接的TCP HTTP请求详细过程

  3. BZOJ_5416_[Noi2018]冒泡排序_DP+组合数+树状数组

    BZOJ_5416_[Noi2018]冒泡排序_DP+组合数+树状数组 Description www.lydsy.com/JudgeOnline/upload/noi2018day1.pdf 好题. ...

  4. liunx下解压压缩命令详细介绍

    Linux下的压缩解压缩命令详解及实例 实例:压缩服务器上当前目录的内容为xxx.zip文件 zip -r xxx.zip ./* 解压zip文件到当前目录 unzip filename.zip == ...

  5. bzoj 4827 [Hnoi2017] 礼物 —— FFT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4827 首先,旋转对应,可以把 b 序列扩展成2倍,则 a 序列对应到的还是一段区间: 再把 ...

  6. Git简单教程

    该笔记总结廖雪峰Git教程, 参考网站: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017 ...

  7. WebBrowser内嵌页面的跨域调用问题

    很早之前我写过一篇Blog:网页通过External接口与WebBrowser交互,文中的交互其实只介绍了JS调用C++的部分,而C++调用JS由于微软自己的例子太多,那篇文章就没介绍,不过我最近遇到 ...

  8. elmo驱动器使用EAS II配置教程

    一.驱动器接线 1.1驱动器接口: 驱动器接线,需要连接两个接口,一个是反馈接口,一个是STO接口. 反馈接口,我这里使用了elmo驱动器的Port A.这个接口提供5v电源.并且可以输入旋转编码器和 ...

  9. 读取关联数据（EF Core2.1.1）

    对象-关系映射框架比如EF有三种 方式使用 模型中的导航属性来加载关联数据. 一..Lazy Loading.(关联数据在访问导航属性时被透明的加载,不需要特别的代码,自动的加载) 当一个实体第一次读 ...

  10. sql语句之查询操作

    语法顺序: select distinct 字段1,字段2,字段3 from 库.表 where 条件 group by 分组条件 having 过滤 # 执行顺序的话,到这步会返回运行select语 ...