<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. 简单封装微信小程序

    一.不同环境配置封装 新建config文件夹,根据自己有不同环境设置不同的js文件 具体js文件内容: exports.config = { requestHost: 'https://******. ...

  2. html5--5-16 综合实例绘制饼图

    html5--5-16 综合实例绘制饼图 实例 <!doctype html> <html> <head> <meta charset="utf-8 ...

  3. map的详细用法 (转

    map的详细用法: map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能 力,由于这个特性,它完成有可能在我 ...

  4. TensorFlow 图像预处理（一） 图像编解码，图像尺寸调整

    from: https://blog.csdn.net/chaipp0607/article/details/73029923 TensorFlow提供了几类图像处理函数,下面介绍图像的编码与解码,图 ...

  5. 在SQL SERVER 2008中通过已有的数据库生成建库脚本

  6. JavaScript ES6中export、export default、import用法和区别

    相信熟悉JS ES6的同学都知道export.export default是导出,import是导入的意思. 那么问题就来了, 1.import 导入要怎么用? 2.export.export def ...

  7. Git 常用命令学习

    本文转载自:https://buptldy.github.io/2016/03/02/2016-03-02-Git%20Cheat%20Sheet/ 文章 创建版本库 初始化一个Git仓库,使用git ...

  8. 构建一个简单的Angular工程

    1.创建一个空的工程,之后用webstorm打开,添加一个bower.json文件: { "name": "AngularTpl", "depende ...

  9. c#静态多态性与动态多态性

    C# 多态性 多态性意味着有多重形式.在面向对象编程范式中,多态性往往表现为"一个接口,多个功能". 多态性可以是静态的或动态的.在静态多态性中,函数的响应是在编译时发生的.在动态 ...

  10. react中虚拟DOM的基本概念

    react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...