<!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. Js组件的一些写法【转】

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  2. 【FFXV】中物理模拟的结构以及游戏业界的乐趣

    11月2日是在日本兵库县神户会议中心召开的[SIGGRAPH ASIA 2015]的第一天,在游戏开发专门的研究会[R&D in the Video Game Industry]上,展开了[F ...

  3. PHP不能创建csv中文名文件

    使用iconv 将utf-8转换成gb2312即可$name = iconv("utf-8","gb2312",'分销商下载课件记录');

  4. PHP自动加载__autoload的工作机制

    PHP自动加载__autoload的工作机制 PHP的懒加载lazy loading 在 2011年11月12日 那天写的     已经有 4559 次阅读了 感谢 参考或原文   服务器君一共花费了 ...

  5. Fingerprinting

    https://wiki.mozilla.org/Fingerprinting Fingerprinting   Contents 1 Overview 2 Data 2.1 Plugins 2.2 ...

  6. hiho41 : 骨牌覆盖问题·一

    原问题:骨牌覆盖问题 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 骨牌,一种古老的玩具.今天我们要研究的是骨牌的覆盖问题:我们有一个2xN的长条形棋盘,然后用1x2的 ...

  7. nginx 反向代理 取得真实IP和域名

    nginx反向代理后,在应用中取得的ip都是反向代理服务器的ip,取得的域名也是反向代理配置的url的域名,解决该问题,需要在nginx反向代理配置中添加一些配置信息,目的将客户端的真实ip和域名传递 ...

  8. java JDK8 学习笔记——第15章 通用API

    第十五章 通用API 15.1 日志 15.1.1 日志API简介 1.java.util.logging包提供了日志功能相关类与接口,不必额外配置日志组件,就可在标准Java平台使用是其好处.使用日 ...

  9. 【Android测试】【随笔】获得App的包名和启动页Activity

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5157308.html 前言 经常看到一些刚刚接触Andro ...

  10. 图解SSL/TLS协议

    本周,CloudFlare宣布,开始提供Keyless服务,即你把网站放到它们的CDN上,不用提供自己的私钥,也能使用SSL加密链接. 我看了CloudFlare的说明(这里和这里),突然意识到这是绝 ...