<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. static静态数据的初始化

    package com.demo.book; public class StaticInitialization { static Table table = new Table(); static ...

  2. Rsync+Inotify同步

    rsync服务安装与<rsync+sersync同步>环境一样! 安装inotify-tools 在源服务器10.10.2.191上操作: 1.查看服务器内核是否支持inotify ll ...

  3. MFC中显示一张位图

    1.用类CBitmap加载位图 2.创建内存DC, 将位图选进此内存DC 3.调用BitBlt将内存DC的内容拷贝到其它DC(通知是显示DC) 例子(来自MSDN): // This OnDraw() ...

  4. 【linux】lsof命令和{Linux下文件删除、句柄与空间释放问题}

      导读: 一.用事实说话 二.关于LSOF命令的其它用法: 三.参考文档:   正文: lsof:Finding open files with lsof 作用:查看文件被哪些进程打开 一.用事实说 ...

  5. Python框架下django 的并发和多线程

    django 的并发能力真的是令人担忧,django本身框架下只有一个线程在处理请求,任何一个请求阻塞,就会影响另一个情感求的响应,尤其是涉及到IO操作时,基于框架下开发的视图的响应并没有对应的开启多 ...

  6. Win32编程点滴5 - 响应ActiveX控件的事件

    在最近的一篇文章中说到了,如何创建ActiveX,这次我们来响应事件.这次,我们将创建一个类:CGeneralEventSink,它能够响应任何Dispatch事件(事件的接口继承与IDispatch ...

  7. bzoj4521

    数位dp 复习数位dp 数位dp一般用记忆化搜索来解决 观察需要满足的条件,然后计入状态 状态还要记录是否达到上线,以及前导零 比如说这道题 dfs(bit,a4,a8,cnt,last,limit) ...

  8. 机器学习之PCA主成分分析

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 简介 在用统计分析方法研究多变量的课题时,变量个数太多就会增加课题的复杂性.人们自然希望变量个数较少而得到的 信息较多.在很 ...

  9. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

  10. Nginx的安装配置和tomcat负载均衡

    Nginx简介 什么是nginx? Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师Igor Sysoev所开发,官方测试ngi ...