关于如何实现右边下拉框中选项的排序一时没有好的解决方法，等想到了回来补充

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        #select1 {

            margin-left: 20px;

        }

        #select2{

            margin-left: 20px;

        }

        span{

            display: block;

            border: 1px solid orange;

            width: 135px;

            background-color: coral;

            color: whitesmoke;

            box-shadow: 1px 1px 10.1px salmon;

            margin-bottom: 5px;

            margin-top: 5px;

            cursor: pointer;

        }

        .container2{

            position: absolute;

            left:200px;

            top: 8px;

        }

    </style>

</head>

<body>

    <div class="container1">

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

            <!-- multiple:使下拉框能够同时拖选多个选项 -->

            <option value="1">1</option>

            <option value="2">2</option>

            <option value="3">3</option>

            <option value="4">4</option>

            <option value="5">5</option>

            <option value="6">6</option>

            <option value="7">7</option>

            <option value="8">8</option>

            <option value="9">9</option>

            <option  value="10">10</option>

        </select>

        <div>

            <span id="add">选中添加到右边&gt;&gt;</span>

            <span id="addAll">全部添加到右边&gt;&gt;</span>

        </div>

    </div>

    <div class="container2">

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

        </select>

        <div>

            <span id="remove">选中删除到左边&lt;&lt;</span>

            <span id="removeAll">全部删除到左边&lt;&lt;</span>

        </div>

    </div>

    <script>

        window.onload = function(){

            var addBtn = document.getElementById("add");

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

            var container = document.getElementsByClassName("container1")[0];

            var options = container.getElementsByTagName("option");

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

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

            var optSore = [];

            var valueStore = [];

            console.log(options);

            function addToRight(){

                var i = 0;

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

                    if(options[i].selected){//别用.getAttrbute("selected")

                        // valueStore.push(options[i].value);

                        // optSore.push(options[i]);

                        console.log(options[i]);

                        var move =  select1.removeChild(options[i]);

                        console.log(move);

                        select2.appendChild(move);

                        i = i - 1;

                        //@解决了！options是左边容器中的选项列表，每次移除一个选项后，紧跟在后面的选项就会上移，

                        //所以要将这里的i前移一位 明天补个示意图

                    }

                }

                console.log(optSore,valueStore);

            }

            function addAllOpt(){

                var i = 0;

                for(i;i<options.length;i++){

                    optSore.push(options[i]);

                    valueStore.push(options[i].value);

                }

                console.log(optSore,valueStore);

            }

            addBtn.addEventListener("click",addToRight,false);

            addAll.addEventListener("click",addAllOpt,false);

        }

    </script>

    <script>

        // $(function(){

        //     $("#add").click(function(){

        //     var $selectedOpt = $("#select1 option:selected");

        //     var $remove = $selectedOpt.remove();//我惊了 你呢 原生js有这种操作吗

        //     $remove.prop("selected",false)//不然添加过去后会停留在被选中的状态

        //     .appendTo("#select2");

        // });

        //     $("#addAll").click(function(){

        //         var $removeAll = $("#select1 option").remove();

        //         $removeAll.appendTo("#select2");

        // })

        // });

    </script>

</body>

</html>

JavaScript 下拉框 左边添加至右边的更多相关文章

  1. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  2. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  3. 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 谈谈如何给下拉框option添加点击事件？

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  5. 纯原生javascript下拉框表单美化实例教程

    html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...

  6. JavaScript下拉框去除重复内容

    下拉框去除重复内容 <script type="text/javascript" src="http://www.joleye.com/libraries/java ...

  7. 实现antd下拉框动态添加内容（与数据库交互）

    antd下拉控件的动态内容添加(与数据库交互) antd这个框架给开发带来了极大的方便,但同时,我认为还有一些不方便的地方:常用的逻辑在文档中没有体现.需要前端开发经验的人才能快速上手,而我刚刚接触这 ...

  8. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  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. Vxlan基础理解

    一 . 为什么需要Vxlan   1. vlan的数量限制    4096个vlan远不能满足大规模云计算数据中心的需求   2. 物理网络基础设施的限制    基于IP子网的区域划分限制了需要二层网 ...

  2. React Native 继续学习

    下一个项目公司也打算使用react native.大致看了下原型设计,写几个小demo先试试水.特此记录下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付. 2.导航条渐隐 ...

  3. 新建一个self hosted Owin+ SignalR Project(2)

    ASPNET SignalR是为ASP.NET开发人员提供的一个库,可以简化开发人员将实时Web功能添加到应用程序的过程.实时Web功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向 ...

  4. nginx的变量参数 详解

    $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?",否则为 ...

  5. 利用Aspectj实现Oval的自动参数校验

    前言: Oval参数校验框架确实小巧而强大, 他通过注解的方式配置类属性, 然后通过Oval本身自带的工具类, 快速便捷执行参数校验. 但是工具类的校验需要额外的代码编写, 同时Oval对函数参数级的 ...

  6. 【ShareCode】不错的技术文章 -- 如何使用异或（XOR）运算找到数组中缺失的数？

    如何使用异或(XOR)运算找到数组中缺失的数? 今天给大家分享一篇关于使用XOR(异或)运算找到数组中缺失的数的问题. 在一次Javascript面试中,有这么一个问题: 假设有一个由0到99(包含9 ...

  7. Centos6.5搭建Elasticsearch

    ElasticSearch是基于Lucene的搜索服务.支持分布式多用户能力的全文搜索引擎,提供RESTful web接口.Elasticsearch是用Java开发的,Apache旗下开源项目,支持 ...

  8. java-IO流-字节流-概述及分类、FileInputStream、FileOutputStream、available()方法、定义小数组、BufferedInputStream、BufferedOutputStream、flush和close方法的区别、流的标准处理异常代码

    1.IO流概述及其分类 * 1.概念      * IO流用来处理设备之间的数据传输      * Java对数据的操作是通过流的方式      * Java用于操作流的类都在IO包中      *  ...

  9. java_线程

    线程1    与线程相关的概念    线程与进程的区别    线程创建策略    线程组        线程创建策略        并发应用中一般有两种不同的线程创建策略        1直接控制线程 ...

  10. vue-demo(初级)

    在使用WebStorm前把字符编码等等设置好! 使用WebStorm打开vue项目等待ide索引加载完成 注意要让WebStorm可以创建vue文件需要以下步骤: <template> & ...