一、直接上代码

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="utf-8" />

   <title>index</title>

 </head>

 <body>

     <div>

         <select id="leftSelector" multiple="multiple" name="SmsListOnLeft" style="height:100px; width:50px">

             <option value="0">0</option>

             <option value="1">1</option>

             <option value="2">2</option>

             <option value="3">3</option>

             <option value="4">4</option>

             <option value="5">5</option>

         </select>

         <span style="top: 30px; position: fixed;">

             <input type="button" value="<<" id="btnLeft" />

             <input type="button" value=">>" id="btnRight" />

         </span>

         <select id="rightSelector" multiple="multiple" name="SmsListOnRight" style="height:100px; width:50px; margin-left:80px">

             <option value="6">A</option>

             <option value="7">B</option>

             <option value="8">C</option>

             <option value="9">D</option>

             <option value="10">E</option>

         </select>

     </div>

     <br>

     <input type="button" onclick="selectAll()" id="btnSelectAll" value="selectAll" />

     <script src="js/jquery-2.1.4.js"></script>

     <script>

         $("#btnRight").click(function () {

             //数据option选中的数据集合赋值给变量vSelect

             var vSelect = $("#leftSelector option:selected");

             //克隆数据添加到 rightSelector 中

             vSelect.clone().appendTo("#rightSelector");

             //同时移除 leftSelector 中的 option

             vSelect.remove();

         });

         //right move

         $("#btnLeft").click(function () {

             var vSelect = $("#rightSelector option:selected");

             vSelect.clone().appendTo("#leftSelector");

             vSelect.remove();

         });

         function selectAll() {

             var lst1 = window.document.getElementById("rightSelector");

             var length = lst1.options.length;

             for (var i = 0; i < length; i++) {

                 var v = lst1.options[i].value;    //option内的value

                 var t = lst1.options[i].text;    //显示的文本

                 alert(v + ":" + t);

             }

         }

     </script>

 </body>

 </html>

二、效果图

jQuery：实现两个<select>控件的互移操作的更多相关文章

  1. Jquery+json绑定带层次下拉框（select控件）

    一.实现的效果图 备注: 1.主要实现添加类别绑定到Ztree树之后,select下拉框在不刷新页面的情况下,通过Jquery重新绑定问题,增加用户体验度: 2.这个只是实现两层的绑定,通过sql语句 ...

  2. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  3. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  4. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

  5. jquery仿jquery mobile的select控件效果

    不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...

  6. jquery去重复 如何去除select控件重复的option

    #1.去除select控件重复的option <select id="companyId" onchange="getContract()" name=& ...

  7. jquery datepicker-强大的日期控件

    在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...

  8. JavaScript封装一个实用的select控件

    最近一直把精力放在项目上面,导致忽略的一些底层的东西.以前就一直觉得原有的select控件很丑,正好周末有时间,试着做了一个简单封装,实现了它的基本功能.我总结了一下,大概分为三个部分: 1.对显示样 ...

  9. js+CSS实现模拟华丽的select控件下拉菜单效果

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

随机推荐

  1. URL安全的Base64编码

    Base64编码可用于在HTTP环境下传递较长的标识信息.在其他应用程序中,也常常需要把二进制数据编码为适合放在URL(包括隐藏表单域)中的形式.此时,采用Base64编码不仅比较简短,同时也具有不可 ...

  2. [数据结构]——链表(list)、队列(queue)和栈(stack)

    在前面几篇博文中曾经提到链表(list).队列(queue)和(stack),为了更加系统化,这里统一介绍着三种数据结构及相应实现. 1)链表 首先回想一下基本的数据类型,当需要存储多个相同类型的数据 ...

  3. 访问者模式（visitorpattern）

    /** * 访问者模式 * @author TMAC-J * 在客户端和元素之间添加一个访问者 * 当你需要添加一些和元素关系不大的需求时,可以直接放在访问者里面 * 或者是元素之间有一些公共的代码块 ...

  4. BridgePattern(桥接模式)

    /** * 桥接模式 * @author TMAC-J * 应用于多维度方案 * 用组合的形式代替继承 * 符合单一职责原则 * 一个类只有一个引起他变化的原因 * 增加程序灵活性 */ public ...

  5. RabbitMQ + PHP （一）入门与安装

    RabbitMQ: 1.是实现AMQP(高级消息队列协议)的消息中间件的一种. 2.主要是为了实现系统之间的双向解耦而实现的.当生产者大量产生数据时,消费者无法快速消费,那么需要一个中间层.保存这个数 ...

  6. Android 关于ijkplayer

    基于ijkplayer封装支持简单界面UI定制的视频播放器 可以解析ts格式的so库 怎样编译出可以解析ts等格式的so库?就是编译的时候需要在哪一步修改配置? 一些电视台的m3u8 CCTV1综合, ...

  7. XAMARIN ANDROID 二维码扫描示例

    现在二维码的应用越来越普及,二维码扫描也成为手机应用程序的必备功能了.本文将基于 Xamarin.Android 平台使用 ZXing.Net.Mobile  做一个简单的 Android 条码扫描示 ...

  8. 简述我的SOA服务治理

    SOA服务治理 1.解决业务部门服务冲突和纠纷2.版本定义与版本管理3.服务备案与服务管理4.业务监督与服务监控 SOA的战略目的 一.业务价值胜过技术策略 二.战略目标胜过具体项目的效益 三.内置的 ...

  9. Ubuntu下利用Mono,Jexus搭建Asp.Net(MVC) Web服务器

    最近在Ubuntu上搭建了Asp.Net的Web服务器,其中遇到很多问题,整理一下思路,以备后用. 搭建环境以及配套软件 Ubuntu: 11.10 Mono:3.0.6 下载地址(http://do ...

  10. .NET基础拾遗（3）字符串、集合和流

    Index: (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开发基础 ...