<!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. BZOJ3392: [Usaco2005 Feb]Part Acquisition 交易

    3392: [Usaco2005 Feb]Part Acquisition 交易 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 26  Solved:  ...

  2. 【转】一个FAE（AE）的体会和大家交流

    原文网址:http://www.52rd.com/bbs/dispbbs.asp?boardID=63&ID=228682 本人在国内某芯片设计公司工作近5年时间岗位是AE和FAE,两个工作量 ...

  3. cf509A Maximum in Table

    A. Maximum in Table time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  4. 求一个数组中第K小的数

    面试南大夏令营的同学说被问到了这个问题,我的第一反应是建小顶堆,但是据他说用的是快排的方法说是O(n)的时间复杂度, 但是后来经过我的考证,这个算法在最坏的情况下是O(n^2)的,但是使用堆在一般情况 ...

  5. chinaOS

    从舆论上和政策规定上来推广操作系统,这对国产操作系统而言是好事,还是坏事? 从某种程度上来说,这是好事 运用行政的力量,率先在国家机关中普及国产操作系统确实是件好事,首先是确保了国家信息安全,其次则能 ...

  6. 深入理解linux网络技术内幕读书笔记(六)--PCI层与网络接口卡

    Table of Contents 1 本章涉及的数据结构 1.1 pci_device_id结构 1.2 pci_dev结构 1.3 pci_driver结构 2 PCI NIC设备驱动程序的注册 ...

  7. python unicodeDecode error

    混淆了 python2 里边的 str 和 unicode 数据类型. 0. 你需要的是让编码用实际编码而不是 ascii 1. 对需要 str->unicode 的代码,可以在前边写上 imp ...

  8. Javascript:DOM表格操作

    需求说明: /* *需求说明: *获取元素:tBodies,tHead,tFoot,rows,cells *表格的创建 *数据添加 *隔行变色 *删除操作,剩余表格重新计算,实现隔行变色 */ HTM ...

  9. hibernate jpa 注解 @Temporal(TemporalType.DATE) 格式化时间日期，页面直接得到格式化类型的值

    1.日期: @Temporal(TemporalType.DATE) @Column(name = "applyDate", nullable = false, length = ...

  10. UUID.randomUUID()方法介绍

    UUID.randomUUID().toString()是javaJDK提供的一个自动生成主键的方法.UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机 ...