<!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. MVC4重复提交

    http://blog.sina.com.cn/s/blog_712ff52a0101f38r.html http://blog.csdn.net/litao2/article/details/868 ...

  2. 利用dbms_backup_restore恢复数据库

    测试环境:OEL+11.2.0.1 实例名:orcl2 DBID:1336959433 场景:Oracle数据库的存储坏了,数据文件和控制文件全部丢失,只有数据文件的备份集,且备份集中无控制文件.(当 ...

  3. http协议的各个版本及区别

      这个东西在一篇博文上面看见的,谢谢原博主提供!又学习了...

  4. CPU天梯图

    一幅图,了解CPU

  5. 介绍一款超实用的演讲必备工具 ZoomIt

    最近在整理以前的文件时,发现躺在某个角落的一个超好的实用的小工具——ZoomIt.此工具是 SysinternalsSuite(已被MS收购)众多实用工具的一个. 相信大家在演讲时,经常需要调整屏幕文 ...

  6. c#序列化反序列化工具（json,binary,xml）

    using System; using System.Text; using System.IO; using System.Runtime.Serialization.Formatters.Bina ...

  7. [置顶] Win8.1慎用360优化，可能导致安装驱动出现数据无效的问题。附解决方法

    2013年9月30日,更新说明: 不知道是不是我禁用了其他驱动造成 今天开机后连接手机,我的电脑里没出现MTP设备 于是打开设备管理器,发现MTP,也就是我的XPERIA U出现了感叹号图标 右键更新 ...

  8. 新手们的GDI+绘制方格

    //绘制panel控件触发的事件 //不可在窗体加载时绘制方格        private void panel1_Paint(object sender, PaintEventArgs e)    ...

  9. Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置

    最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性 第一:就是JDK路 ...

  10. 添加序号列（SQL Server）

    SELECT ROW_NUMBER() OVER (ORDER BY 实际缴费金额 ) AS A, --序号 RANK() OVER (ORDER BY 实际缴费金额 ) AS B, --相同跳过从新 ...