<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. html5--5-3 给直线添加样式

    html5--5-3 给直线添加样式 学习要点 strokeStyle属性:设置颜色.渐变或模式(本节课只涉及到颜色) lineWidth属性:--设置线宽 Canvas的路径方法 moveTo() ...

  2. vertical-align 的理解

    1.vertical-align 属性和值列表

  3. php封装数据库mysql, mysqli

    <?php header("content-type:text/html;charset=utf-8"); class db{    //私有的静态属性    private ...

  4. 「ZJOI2007」「LuoguP1169」棋盘制作（并查集

    题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个8×88 \times 88×8大小的黑白相间的方阵,对应八八六十四卦 ...

  5. 12306.cn网站自动登录器源代码

    去年过年放假的时候写了一个12306.cn网站的自动登录器,刚好那时候放假了,所以没把源代码放出来,现在将代码发出来,由于编写得比较仓促(从放假的下午19:00左右到晚上到00:00左右),很多细节问 ...

  6. 苹果app（iOS app）的URL schemes

    最近折腾iOS快捷启动应用或应用内的某个动作的神器launch center pro (LCP),发现很多国产app并没有被LCP官方收录,所以不得不想办法找到app的url schemes. 下面是 ...

  7. CSS：CSS 颜色名

    ylbtech-CSS:CSS 颜色名 1.返回顶部 1. CSS 颜色名 所有浏览器都支持的颜色名. HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色 ...

  8. 注册页面Page的内置属性以及函数 路由 模块化

    Page.prototype.route  route字段可以获取到当前页面的路径 Page.prototype.setData() setData函数用于将数据从逻辑层发送到视图层,同时改变对应的t ...

  9. 机器学习之逻辑回归（logistic回归）

    前言            以下内容是个人学习之后的感悟,转载请注明出处~ 逻辑回归 一.为什么使用logistic回归   一般来说,回归不用在分类问题上,因为回归是连续型模型,而且受噪声影响比较大 ...

  10. html中调用本地exe应用程序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...