下拉列表左右选择
          * 下拉选择框
               <select>
                     <option>111</option>
                     <option>111</option>
               </select>

* 创建一个页面
                   ** 两个下拉选择框
                     - 设置属性 multiple属性
                   ** 四个按钮，有事件
                      * 选中添加到右边
                            步骤
                             /*
                                 1、获取select1里面的option
                                      - getElementsByTagName()返回是数组
                                      - 遍历数组，得到每一个option
                                 2、判断option是否被选中
                                      - 属性 selected，判断是否被选中
                                           ** selected= true: 选中
                                           ** selected= false：没有选择
                                 3、如果是选中，把选择的添加到右边去
                                 4、得到select2
                                 4、添加选择的部分
                                      - appendChild方法
                               */

* 全部添加到右边
                            步骤
                               /*
                                1、获取第一个select下面的option对象
                                2、返回数组，遍历数组
                                3、得到每一个option对象
                                4、得到select2
                                5、添加到select2下面
                                     - appendChild方法
                               */

* 选中添加到左边
                          步骤
                            /*
                               1、获取select2里面的option对象
                               2、返回是数组，遍历数组
                               3、得到每一个option对象
                               4、判断option是否被选中
                                    - if条件 属性 selected == true：选择
                               5、获取select1
                               6、添加到select1里面
                                     - 使用appendChild方法
                           */

* 全部添加到左边
                        步骤
                          /*
                              1、获取select2里面的option对象
                              2、返回是数组，遍历数组
                              3、得到每一个option对象

4、获取到select1
                              5、添加到select1里面
                                   - 使用appendChild方法
                         */

<body>

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

        <div>

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

        <option>AAAAAAAA</option>

        <option>BBBBBBBB</option>

        <option>CCCCCCCC</option>

        <option>DDDDDDDD</option>

        <option>EEEEEEEE</option>

    </select>

    </div>

    <div>

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

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

    </div>

</div>

<div id="s2">

        <div>

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

        <option>QQQQQQQQ</option>

    </select>

    </div>

    <div>

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

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

    </div>

</div>

    <script type="text/javascript">

        //实现全部添加到左边

        function allToLeft() {

            /*

                1、获取select2里面的option对象

                2、返回是数组，遍历数组

                3、得到每一个option对象

                4、获取到select1

                5、添加到select1里面

                    - 使用appendChild方法

            */

            //获取select2

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

            //获取select1

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

            //获取select2里面的option

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

            //遍历数组

            for(var m=0;m<options1.length;m++){

                //得到每一个option

                var op11 = options1[m];

                //添加到select1里面

                select1.appendChild(op11);

                m--;

            }

        }

        //选择添加到左边

        function selToLeft() {

            /*

                1、获取select2里面的option对象

                2、返回是数组，遍历数组

                3、得到每一个option对象

                4、判断option是否被选中

                    - if条件 属性 selected == true：选择

                5、获取select1

                6、添加到select1里面

                    - 使用appendChild方法

            */

            //获取select1

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

            //获取到select2

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

            //得到s1里面的option对象

            var opss = s2.getElementsByTagName("option");

            //遍历数组

            for(var aa=0;aa<opss.length;aa++) {

                //得到每一个option

                var op = opss[aa];

                //判断是否被选中

                if(op.selected == true) { //被选中

                    //添加到select1里面

                    s1.appendChild(op);

                    aa--;

                }

            }

        }

        //全部添加到右边

        function allToRight() {

            /*

                1、获取第一个select下面的option对象

                2、返回数组，遍历数组

                3、得到每一个option对象

                4、得到select2

                5、添加到select2下面

                    - appendChild方法

            */

            //得到select2

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

            //得到select下面的option对象

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

            var ops = s1.getElementsByTagName("option");//返回的是数组

            //遍历数组

            for(var j=0;j<ops.length;j++) {

                //得到每一个option对象

                var op1 = ops[j];

                //添加option到s2下面

                s2.appendChild(op1);

                j--;

            }

        }

        //实现选中添加到右边

        function selToRight() {

            /*

                1、获取select1里面的option

                    - getElementsByTagName()返回是数组

                    - 遍历数组，得到每一个option

                2、判断option是否被选中

                    - 属性 selected，判断是否被选中

                        ** selected= true: 选中

                        ** selected= false：没有选择

                3、如果是选中，把选择的添加到右边去

                4、得到select2

                4、添加选择的部分

                    - appendChild方法

            */

            //获取select1里面的option

            //获取select2

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

            //得到select1

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

            //得到option

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

            //遍历数组

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

                var option1 = options1[i];//得到每一个option对象

                //判断是否被选中

                if(option1.selected == true) {

                    //添加到select2里面

                    select2.appendChild(option1);

                    i--;

                }

            }

        }

    </script>

 </body>

js实现-下拉列表左右选择的更多相关文章

  1. Jquery实现下拉列表左右选择

    知识点: jquery  的 click dbclick  事件  appendTo方法 <!DOCTYPE html> <html> <head> <met ...

  2. jQuery学习(七)——使用JQ完成下拉列表左右选择

    1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...

  3. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  4. JavaScript案例五：下拉列表左右选择

    用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> ...

  5. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  6. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  7. JS控制GridView行选择

    ASP.NET里的GridView控件使用非常广泛,虽然其功能强大,但总有一些不尽如人意的地方.比如在选择行的时候,它就没有UltraWebGrid做的友好:UltraWebGrid允许用户设置是否显 ...

  8. JavaScript基础2——下拉列表左右选择

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 原生JS实现下拉列表

    1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...

随机推荐

  1. java线程安全

    (一).java并发之原子性与可见性 原子性 原子是世界上的最小单位,具有不可分割性.比如 a=0:(a非long和double类型) 这个操作是不可分割的,那么我们说这个操作时原子操作.再比如:a+ ...

  2. linux中sh基本语法

    介绍:1 开头程序必须以下面的行开始(必须方在文件的第一行):#!/bin/sh  有人说是bash符号#!用来告诉系统它后面的参数是用来执行该文件的程序.在这个例子中我们使用/bin/sh来执行程序 ...

  3. BZOJ1024 [SCOI2009]生日快乐

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  4. 素材收集（icon/images/javascript）

    icon: http://www.easyicon.net/ http://www.iconpng.com/ images: http://www.58pic.com/tupian/fenxiangt ...

  5. nand以及yaffs2

    用的是tiny210+1312的SDK,友善之臂给的文件系统居然有300多兆,烧写系统可是要人命了,那个等啊...所以,想着把系统给做小一点.和其他一样,我的知识仅限于理论阶段,嘿嘿.今天实践一下. ...

  6. 验证时出错。HRESULT = '8000000A'

    往往出现在 做了安装项目后有警告: 解决办法: 这本来是在VS2005下创建的一下项目,后来改用VS2010的开发环境,.NET Framework的版本还是使用2.0, 但每次生成之后都会在解决方案 ...

  7. 第5.5次Scrum会议

    会议信息 时间:2016.10.25 21:30 时长:0.5h 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 会议内容 鉴于团队推进受阻,原PM 邓 与 原后端 冯 协商后决定之后一段时间 ...

  8. JavaWeb学习总结-05 Servlet 学习和使用(01)

    一 Servlet的原理 1 Servlet 的创建 当Servlet容器启动web应用时,需要立即加载Servlet时: Servlet容器启动web应用时,将按照指定的顺序初始化Servlet,需 ...

  9. React Native 开发之 (04) 例子讲解

    一.了解index.ios.js React-Native就是在开发效率和用户体验间做的一种权衡.React-native是使用JS开发,开发效率高.发布能力强,不仅拥有hybrid的开发效率,同时拥 ...

  10. NOIp 0924 水题记

    这场貌似是gcd专场? 第一题很有意思,模拟gcd的过程即可. //0924 candy //by Cydiater //2016.9.24 #include <iostream> #in ...