<!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. nmap svn

    http://stackoverflow.com/questions/13296361/nmap-and-svnlib-client-not-working-together http://nmap. ...

  2. Android——在活动中使用Menu

    ADT在HelloWorldActivity中自动创建了一个onCreateOptionsMenu()方法.这个方法是用于在活动中创建菜单的,现在我们来仔细分析一下了.手机毕竟和电脑不同,它的屏幕空间 ...

  3. Powershell错误处理，try catch finally

    脚本的调试向来是一个艰巨的任务,在powershell出现以前简直是一场灾难.在powershell中微软终于做出了诸多改进,不但有了$Error.-whatif,也有了ISE.而在语法上也增加了tr ...

  4. 【HDOJ】2585 Hotel

    字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...

  5. 【转】android UI进阶之实现listview中checkbox的多选与记录--不错

    原文网址:http://www.cnblogs.com/notice520/archive/2012/02/17/2355415.html 今天继续和大家分享涉及到listview的内容.在很多时候, ...

  6. Android 应用框架 —— 组件

    本文内容根据个人自学整理记录,理解不当之处,希望大家批评指正,大家相互学习,写学习归纳,写博客是个好习惯,希望能够坚持下去. 在前一篇文章当中介绍了Android 的系统框架,主要是为了让大家对And ...

  7. HDOJ 1326 Box of Bricks(简单题)

    Problem Description Little Bob likes playing with his box of bricks. He puts the bricks one upon ano ...

  8. poj2955：括号匹配，区间dp

    题目大意: 给一个由,(,),[,]组成的字符串,其中(),[]可以匹配,求最大匹配数 题解:区间dp: dp[i][j]表示区间 [i,j]中的最大匹配数 初始状态 dp[i][i+1]=(i,i+ ...

  9. Mysqldb连接Mysql数据库（转）

    python操作mysql数据库 Python 标准数据库接口为 Python DB-API,Python DB-API为开发人员提供了数据库应用编程接口. Python 数据库接口支持非常多的数据库 ...

  10. linux stat命令

    在Linux中,文件没有“创建时间”这个说法.Linux中的文件的时间属性只有三个:atime(Access time).mtime(Modified time).ctime(Change time) ...