一、直接上代码

 <!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. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  2. Socket聊天程序——服务端

    写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...

  3. Linux中进行单文件内容的复制

    文件内容复制的常规方法: 开辟一段空间,不断读取文件的内容并写入另一文件当中,这种方法好在安全,一般在类型允许的最大范围内是安全的,缺点就是复制内容的时间长 一次性复制文件的内容,这种方法必须首先获取 ...

  4. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  5. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  6. 在vim中使用查找命令查找指定字符串

    要自当前光标位置向上搜索,请使用以下命令:         /pattern   Enter           其中,pattern   表示要搜索的特定字符序列.         要自当前光标位置 ...

  7. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  8. iOS 后台处理

    iOS 后台处理的常见用途 1.进入后台时候删除资源:应用处于挂起状态的时候所占用的资源越少,该应用被iOS终止的风险就越低.通过从内存中清理那些易于重新创建的资源,可以增加应用驻留内存的机会,因此可 ...

  9. BPM配置故事之案例9-根据表单数据调整审批线路2

    老李:好久不见啊,小明. 小明:-- 老李:不少部门有物资着急使用,现在的审批流程太慢了,申请时增加一个是否加急的选项吧.如果选加急,金额1000以下的直接到我这里,我审批完就通过,超过1000的直接 ...

  10. Android之Pull解析XML

    一．Pull解析方法介绍 除了可以使用SAX和DOM解析XML文件,也可以使用Android内置的Pull解析器解析XML文件.Pull解析器的运行方式与SAX解析器相似.它也是事件触发的.Pull解 ...