下拉列表左右选择
          * 下拉选择框
               <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. Android UI性能优化实战, 识别View中的性能问题

    出自:[张鸿洋的博客]来源:http://blog.csdn.net/lmj623565791/article/details/45556391 1.概述 2015年初google发布了Android ...

  2. xml解析工具-jdom

    前言:近期接触SSH框架的时候,经常得配置一下xml文件:今天闲来没事就挖挖xml解析的原理供大伙儿分享.本文主要通过一个简单的例子解析一个xml文件.明白其中缘由之后,大家想定义自己的xml也绝非难 ...

  3. bzoj 3518 Dirichlet卷积

    详情见代码,回头再填坑... #include<iostream> #include<cstdio> #include<algorithm> #include< ...

  4. 【BZOJ-1017】魔兽地图DotR 树形DP + 背包

    1017: [JSOI2008]魔兽地图DotR Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 1566  Solved: 705[Submit][S ...

  5. luars232库中用到的一些C API for lua

    代码就不贴了,这里只是梳理一下前两篇里面忽略的一些东西,作为读代码的记录吧. 1.头文件 #include <lauxlib.h> #include <lua.h> All A ...

  6. POJ 2240 - Arbitrage（bellman_ford & floyd）

    题意: 给出一些货币和货币之间的兑换比率,问是否可以使某种货币经过一些列兑换之后,货币值增加. 举例说就是1美元经过一些兑换之后,超过1美元.可以输出Yes,否则输出No. 分析: 首先我们要把货币之 ...

  7. PHP常用函数备用

    刚学习php的时候,我也为记忆php函数苦恼不已.认为干嘛记忆这么枯燥无味的东西呢?用的时候查一下手册不就行了吗?但是当时因为身在辅导机构,还是记忆了一大堆自己并不感兴趣的函数. 由此就想起来,小的时 ...

  8. HTML5学习总结-07 WebStorage 本地存储

    一 Storage sessionStorage session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据)S ...

  9. Untiy3D - 窗口界面1

    记录Untiy3D学习中的英语单词 一.Project窗口下的英语单词 First Day Folder : 文件夹 C# Script : C#脚本 JavaScript:JS脚本 Editor T ...

  10. python 培训之 装饰器

    1. 高阶函数 接收 函数作为参数,返回函数. 2. 函数闭包 3. 接收一个函数为参数,对其进行包装,然后返回一个包装函数(tip:包装函数中调用并返回参数函数. #! /usr/env/pytho ...