一、直接上代码

 <!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. Logstash实践: 分布式系统的日志监控

    文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...

  2. 百度 flash html5自切换 多文件异步上传控件webuploader基本用法

    双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name=& ...

  3. 在Ubuntu 16.10 安装 git 并上传代码至 git.oschina.net

    1. 注册一个账号和创建项目 先在git.oschina.net上注册一个账号和新建一个project ,如project name 是"myTest". 2.安装git sudo ...

  4. 23种设计模式--代理模式-Proxy

    一.代理模式的介绍       代理模式我们脑袋里出现第一个词语就是代购,其实就是这样通过一个中间层这个中间成是属于什么都干什么都买得,俗称"百晓生",在平时得开发中我们经常会听到 ...

  5. 如何进行python性能分析？

    在分析python代码性能瓶颈,但又不想修改源代码的时候,ipython shell以及第三方库提供了很多扩展工具,可以不用在代码里面加上统计性能的装饰器,也能很方便直观的分析代码性能.下面以我自己实 ...

  6. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  7. $ORACLE_HOME变量值末尾多“/”惹的祸

    之前一直误以为$ORACLE_HOME变量的路径中末尾多写一个"/"不会有影响. 今天做实验时碰到一个情景,发现并不是这样. 环境:OEL 5.7 + Oracle 10.2.0. ...

  8. c# Enumerable中Aggregate和Join的使用

    参考页面: http://www.yuanjiaocheng.net/ASPNET-CORE/asp.net-core-environment.html http://www.yuanjiaochen ...

  9. 关于CSS inline-block、BFC以及外边距合并的几个小问题

    CSS inline-block和BCF对于初学者来说,总是弄不太明白,下面记录下我在学习这块知识的过程中遇到的几个问题,供大家参考,有不足的地方,欢迎大家批评指正. 一.在什么场景下会出现外边距合并 ...

  10. maven打包插件:appassembler

    1.打包成bat 打包命令:mvn clean package appassembler:assemble <plugin> <groupId>org.codehaus.moj ...