<!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. qt编写一个只能运行单个实例的程序，不用Windows API

    QtSingleApplicationhttp://code.qt.io/cgit/qt-solutions/qt-solutions.git/tree/qtsingleapplication 已打开 ...

  2. JavaScript 比较操作符，严格比较===

    JavaScript 有两种比较方式:严格比较运算符和转换类型比较运算符.对于严格比较运算符(三个 =)来说,为ture的情况是仅当两个操作数拥有相同的类型,而对于被广泛使用的比较运算符(两个 =)来 ...

  3. 利用http实现文件的上传和下载

    其他语言都比较方便,使用http上传.但是C++这样就差点,不过还好,Linux下有个curl的命令行工具,这是一个开源项目,底下有个子项目是libcurl,curl就是调用这个API实现的一系列ft ...

  4. alias, bg, bind, break, builtin, caller, cd, command,

    bash,  :,  .,  [, alias, bg, bind, break, builtin, caller, cd, command,       compgen, complete, com ...

  5. [LeetCode] 35. Search Insert Position 解决思路

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  6. openstack 安装

  7. easyui 获取cloumns字段

    var colums=datagrid.datagrid('options').columns; var frozens=datagrid.datagrid('options').frozenColu ...

  8. cocos2dx 利用CCOrbitCamera实现扑克牌翻牌效果

    [cpp] view plaincopy #include "HelloWorldScene.h" #include "SimpleAudioEngine.h" ...

  9. WSAEventSelect

    WSAEventSelect 是 WinSock 提供的一种异步事件通知I/O模型,与 WSAAsyncSelect模型有些类似.       该模型同样是接收 FD_XXX 之类的网络事件,但是是通 ...

  10. 如何解决svn图标不显示呢？

    svn图标不显示解决 确保设置正确: 右键->TortoiseSVN->setting->Icon Overlays->Status cache->default/She ...