<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>选择项</title>

            <script>

            // 选中添加到右边

            function selectedToRight(){

                // 获取select2标签

                var select2 = document.getElementById("select2");

                // 获取select1标签

                var select1 = document.getElementById("select1");

                // 获取option

                var option1 = select1.getElementsByTagName("option");

                // 遍历

                for (var i=0;i<option1.length;i++) {

                    var optioni = option1[i];

                    //是否被选中

                    if(optioni.selected == true){

                        // 添加到select2里面

                        select2.appendChild(optioni);

                        //数组长度发生变化，需要处理

                        i--;

                    }

                }

            }

            // 选中添加到左边

            function selectedToLeft(){

                // 获取select2标签

                var select2 = document.getElementById("select2");

                // 获取select1标签

                var select1 = document.getElementById("select1");

                // 获取option

                var option2 = select2.getElementsByTagName("option");

                // 遍历

                for (var i=0;i<option2.length;i++) {

                    var optioni = option2[i];

                    //是否被选中

                    if(optioni.selected == true){

                        // 添加到select1里面

                        select1.appendChild(optioni);

                        //数组长度发生变化，需要处理

                        i--;

                    }

                }

            }

            // 全部添加到右边

            function allToRight(){

                // 获取select2标签

                var select2 = document.getElementById("select2");

                // 获取select1标签

                var select1 = document.getElementById("select1");

                // 获取option

                var option1 = select1.getElementsByTagName("option");

                // 遍历

                for (var i=0;i<option1.length;i++) {

                    var optioni = option1[i];

                    // 添加到select2里面

                    select2.appendChild(optioni);

                    //数组长度发生变化，需要处理

                    i--;

                }

            }

            // 全部添加到左边

            function allToLeft(){

                // 获取select2标签

                var select2 = document.getElementById("select2");

                // 获取select1标签

                var select1 = document.getElementById("select1");

                // 获取option

                var option2 = select2.getElementsByTagName("option");

                // 遍历

                for (var i=0;i<option2.length;i++) {

                    var optioni = option2[i];

                    // 添加到select1里面

                    select1.appendChild(optioni);

                    //数组长度发生变化，需要处理

                    i--;

                }

            }

        </script>

    </head>

    <body>

        <div id="s1" style="float: left;">

            <div>

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

                <option>AAAAAAA</option>

                <option>BBBBBBB</option>

                <option>CCCCCCC</option>

                <option>DDDDDDD</option>

                <option>EEEEEEE</option>

                </select>

                <div>

                    <input type="button" value="选中添加到右边" onclick="selectedToRight();"/><br />

                    <input type="button" value="全部添加到右边" onclick="allToRight();"/>

                </div>

            </div>

        </div>

        <div id="s2" >

            <div>

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

                <option>FFFFFFF</option>

                </select>

                <div>

                    <input type="button" value="选中添加到左边" onclick="selectedToLeft();"/><br />

                    <input type="button" value="全部添加到左边" onclick="allToLeft();"/>

                </div>

            </div>

        </div>

    </body>

</html>

html 把左框的选中项添加到右框的更多相关文章

  1. MFC CListCtrl 将一个列表的选中项添加到另一个列表

    MFC CListCtrl 将一个列表的选中项添加到另一个列表, 用VC6.0实现: 简单记录一下自己的学习历程, 和大家分享,如果对你有用,我很高兴. 1.新建一个基于对话框的工程(Dialog-B ...

  2. JSP页面获取下来框select选中项的值和文本的方法

    <select id="username"  name=""> <option   value="1">jyy< ...

  3. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  4. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  5. 使用mobile jQuery 动态给select下拉添加数据，选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  6. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

    最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...

  7. 让单选input框，不在被选中，添加disabled即可。输入框input的一些技巧

    1.让单选input框,不在被选中,添加disabled即可 2.input的file文件对象的清空,只需要input.val("");就可以了.

  8. jq select change下拉框选项变化判断选中值,添加（attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  9. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

随机推荐

  1. [服务器]脚本：批处理带参数ping命令 发送邮件脚本

    1.批处理带参数ping命令 @echo offecho Input you IP address ......set /p IP=echo Your IP number is %IP%.ping % ...

  2. ThinkPHP 3.2.2 视图模板中使用字符串截取函数

    在项目的 Common/function.php 文件里( 项目结构如图 ) 添加函数: /*字符串截断函数+省略号*/ function subtext($text, $length) { if(m ...

  3. Apache服务器代理与缓存

    Apache服务器代理与缓存 1.代理  正向代理:             反向代理:   mod_proxy模块 apache实现代理和网关的关键模块.加载mod_proxy模块:LoadModu ...

  4. Networking with PHP

    PHP Advanced and Object-Oriented Programming 3rd Edition

  5. BlueDroid代码分析之GKI

    目录 1. 概述 2. 线程 2.1 主要函数 2.2 功能 3. 事件 3.1 主要函数 3.2 功能 1. 概述 GKI以库libbt-brcm_gki.so(Static Lib?)的形式提供给 ...

  6. FW Docker为容器分配指定物理网段的静态IP

    官方有关于网桥和IP配置的文档地址:https://docs.docker.com/articles/networking/ 1.宿主机(系统采用ubuntu-14.04.1-server-amd64 ...

  7. go安装windows源码

    直接安装就好,下面是安装地址http://pan.baidu.com/s/1gdDFi9t

  8. isset和empty比较

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...

  9. Linux QtCreator设置mingw编译器生成windows程序

    Qt跨平台,那必须在Linux平台编译一个可以在windows下运行的Qt程序才行,当然还得和QtCreator环境弄在一起才行. 工作环境:Centos 7 yum install qt5-qt* ...

  10. js实现表格信息的删除和添加

    制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮 ...