<!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. [学习笔记]RAID及实验

    RAID: RAID 0 好比只用左手拿了一摞大饼放在那里,相比于只拿一张饼吃,吃的速度会加快.但是万一掉了,就没有了. RAID 1 好比左右手两手一边一个大饼,怎么样都有的吃.但是一只手掉了,还有 ...

  2. 使用shape设置只有部分边框有颜色

    <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android=" ...

  3. 归纳整理 PHP大神的十大优良习惯

    2015年03月04日11:26 来源:程序师 作者:TECHUG 编辑:覃里 查看全文 赞(0)评论(0) 分享 标签: PHP , 编程指南 , PHP开源项目 [IT168 资讯] 1.多阅读手 ...

  4. Apache服务器代理与缓存

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

  5. Deep Learning Tutorial

    http://www.slideshare.net/tw_dsconf/ss-62245351?qid=c0f0f97a-6ca8-4df0-97e2-984452215ee7&v=& ...

  6. Lazarus开发平台编译后的可执行程序的减肥方法

    1.在“工程”菜单下,单击“工程选项”,原始状态的界面为: 2.将界面中的两个选项修改为如下: 3.按“确定”按钮,即可 编译以后的可执行程序就将又原来的14m变为1.66m. 1.选择: Proje ...

  7. nginx php解析过慢

    nginx 报错 upstream timed out (110: Connection timed out)解决方案 error.log报错如下: 2013/05/18 21:21:36 [erro ...

  8. go access database demo

    package main import ( "database/sql" "fmt" _ "github.com/lib/pq" " ...

  9. Java中instanceof用法

    java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例.instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. 用法:resu ...

  10. 蓝牙Host Controller Interface笔记

    1.概述     HCI提供了一个统一的使用蓝牙控制器(BR/EDR Controller,BR/EDR/LE Controller,LE Controller,AMP Controller等)的方法 ...