下拉列表左右选择
          * 下拉选择框
               <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. 类-string/Manth/Random/DateTime-及练习

    类一.string类:.Length 字符串的长度 .Trim() 去掉开头以及结尾的空格.TrimStart() 去掉开头的空格.TrimEnd() 去掉结尾的空格 .ToLower() 全部转换为 ...

  2. 数据库连接池的选择 Druid

    我先说说数据库连接 数据库大家都不陌生,从名字就能看出来它是「存放数据的仓库」,那我们怎么去「仓库」取东西呢?当然需要钥匙啦!这就是我们的数据库用户名.密码了,然后我们就可以打开门去任意的存取东西了. ...

  3. 【C++实现python字符串函数库】strip、lstrip、rstrip方法

    [C++实现python字符串函数库]strip.lstrip.rstrip方法 这三个方法用于删除字符串首尾处指定的字符,默认删除空白符(包括'\n', '\r', '\t', ' '). s.st ...

  4. 【BZOJ-2521】最小生成树 最小割

    2521: [Shoi2010]最小生成树 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 415  Solved: 242[Submit][Statu ...

  5. 【bzoj3757】 苹果树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3757 (题目链接) MD调了好久,最后蒯了几个标程交上去,没想到都RE了...最后才看到:  = = ...

  6. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  7. [NOIP2015] 提高组 洛谷P2679 子串

    题目背景 无 题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个新 ...

  8. [U3D 导出Xcode工程包，用Xcode给U3D脚本传递参数]

    1.导出Xcode工程 File->Building and setting,导出IOS工程(有错误会失败) 2.运行Xcode工程,在Classes文件夹的UI文件夹里,早到UnityAppC ...

  9. 基于UDP协议的程序设计

    使用UdpClient类进行编程 UdpClient类的使用方法 第一阶段 创建UdpClient实例 UdpClient udpClient = new UdpClient(); IPAddress ...

  10. jboss wildfly 外网访问

    在standalone.xml中: 找到下面三行,看到是要访问public(8080端口的)和management的interface,将interface中的127.0.0.1改为0.0.0.0即可 ...