一、直接上代码

 <!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. C语言 · 查找整数 · 基础练习

    问题描述 给出一个包含n个整数的数列,问整数a在数列中的第一次出现是第几个. 输入格式 第一行包含一个整数n. 第二行包含n个非负整数,为给定的数列,数列中的每个数都不大于10000. 第三行包含一个 ...

  2. Hawk 6. 高级话题：子流程系统

    子流程的定义 当流程设计的越来越复杂,越来越长时,就难以进行管理了.因此,采用模块化的设计才会更加合理.本节我们介绍子流程的原理和使用. 所谓子流程,就是能先构造出一个流程,然后被其他流程调用.被调用 ...

  3. ASP.NET中常用的优化性能的方法

    1. 数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源.ASP.NET中提供了连接池( ...

  4. EF上下文对象线程内唯一性与优化

    在一次请求中,即一个线程内,若是用到EF数据上下文对象,就创建一个,这也加是很多人的代码中习惯在使用上下文对象时,习惯将对象建立在using中,也是为了尽早释放上下文对象, 但是如果有一个业务逻辑调用 ...

  5. java中易错点（二）

    java,exe是java虚拟机 javadoc.exe用来制作java文档 jdb.exe是java的调试器 javaprof,exe是剖析工具 解析一: sleep是线程类(Thread)的方法, ...

  6. Ajax部分

    Ajax的概念 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指 ...

  7. 微信小程序服务范围重大更新

    12.29日,小程序服务范围做了重大更新,增对富媒体和工具类型的小程序,增加了很多细分领域 富媒体:增加资讯,FM电台,有声读物等,媒体平台可上小程序了 工具:信息查询,网络代理,健康,企业管理等 , ...

  8. Android 中的mvvm

    我们来了解一下MVVM模式与Databinding ,MVVM是一种模式,Databinding 是一种框架.DataBinding是一个实现数据和UI绑定的框架.而ViewModel和View可以通 ...

  9. Maven常用命令

    开发中常用的命令: 1. mvn compile 编译源代码2. mvn test-compile 编译测试代码3. mvn test 运行测试4. mvn package 打包,根据pom.xml打 ...

  10. TFS 安装错误

    错误   问题详细: HTTP 错误 500.19 - Internal Server Error   无法访问请求的页面,因为该页的相关配置数据无效.     详细错误信息     模块 Dynam ...