<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <select id="leftBox" multiple="multiple" style="height: 200px; width: 100px;">

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

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

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

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

    </select>

    <input type="button" value=">" onclick="move('leftBox','rightBox')"/>

    <input type="button" value="<" onclick="move('rightBox','leftBox')"/>

    <!--<input type="button" value=">>" onclick="moveAll('leftBox','rightBox')"/>

    <input type="button" value="<<" onclick="moveAll('rightBox','leftBox')"/>    -->

    <select id="rightBox" multiple="multiple" style="height: 200px; width: 100px;">

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

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

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

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

    </select>    

    </body>

</html>

<script type="text/javascript">

        // 移動id為from的列表中的選中項到id為to的列表中

        function move(from,to) {

            // 獲取移動源

            var fromBox = document.getElementById(from);

            // 獲取移動目的地

            var toBox = document.getElementById(to);

            // 當移動源存在選中項時

            while(fromBox.selectedIndex != -1){

                // 將移動源中的選中項添加到移動目的地的末尾

                toBox.appendChild(fromBox.options[fromBox.selectedIndex]);

            }

        }

         </script>

用js实现两个select下拉框之间的元素互相移动的更多相关文章

  1. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  2. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  3. 非常实用的select下拉框-Select2.js

    在Web开发中,Select下拉框是常用的输入组件.由于原生的Select几乎很难通过CSS样式控制.一些好看的Select下拉框就只能通过模拟来实现.PHP程序员雷雪松给大家推荐一筐款不错的Sele ...

  4. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  5. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  6. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. javascript遍历select下拉框判断其中值是否与指定值相等

    用jquery多了,就忘了原生的js是如何写的了,还需要多加巩固. 需求:jsp回显一select下拉框.选中指定值. 用户点击修改 该select进行已有值回显.有两种解决方法 一.js中获取用户的 ...

  8. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  9. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

随机推荐

  1. HttpCookie

    参考 : http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html 上文结尾有提到一个说法 4. HttpRequest.Cooki ...

  2. 51单片机 Keil C 延时程序的简单研究

    应用单片机的时候,经常会遇到需要短时间延时的情况.需要的延时时间很短,一般都是几十到几百微妙(us).有时候还需要很高的精度,比如用单片机驱动DS18B20的时候,误差容许的范围在十几us以内,不然很 ...

  3. COJ 1010 WZJ的数据结构（十） 线段树区间操作

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=1001 WZJ的数据结构(十) 难度级别:D: 运行时间限制:3000ms: ...

  4. sql Sever 修改表中的列名

    EXEC SP_RENAME 'LeInterface.iYear','iLeYear','COLUMN' EXEC SP_RENAME 'LeInterface.imonth','iLemonth' ...

  5. 切割 bitmap

    最近在安卓手机控制蓝牙打印机打印图片,有时候图片太大,考虑到bitmap的切割,在此,献上代码,各位小主指点 public class ImageSplitter { public static Ar ...

  6. [LeetCode] 147. Insertion Sort List 解题思路

    Sort a linked list using insertion sort. 问题:实现单向链表的插入排序. 这是比较常规的一个算法题目. 从左往右扫列表,每次将指针的下一个元素插入前面已排好序的 ...

  7. 【Ruby on Rails学习二】在线学习资料的整理

    由于工作任务重,时间紧,没有太多学习的时间,大致找了些在线学习资料,这里做个整理,希望对同样准备学习的朋友有帮助 在线文档类: Ruby on Rails 实战圣经  使用 Rails 4.2 及 R ...

  8. win7配置简单的FTP服务器

    1.开启一些win7默认是关闭状态的功能 步骤:控制面板 -> 程序和功能 -> 打开或关闭Windows功能,然后勾选下图中圈起来的部分: 2.添加FTP站点 步骤:桌面的计算机图标 - ...

  9. 字符流；字节流；带缓冲的输入输出流；以及用scanner读文件

    概念: InputStream类是字节输入流的抽象类,是所有字节输入流的父类. OutputStream类是字节输入流的抽象类,是所有字节输出流的父类. In(可以理解为读)Out(可以理解为写) 一 ...

  10. uva 11825 Hackers&#39; Crackdown （状压dp，子集枚举）

    题目链接:uva 11825 题意: 你是一个黑客,侵入了n台计算机(每台计算机有同样的n种服务),对每台计算机,你能够选择终止一项服务,则他与其相邻的这项服务都终止.你的目标是让很多其它的服务瘫痪( ...