下拉列表左右选择
          * 下拉选择框
               <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. solr-5.3部署到tomcat

    下载 solr 5.3 版本: http://www.apache.org/dyn/closer.lua/lucene/solr/5.3.0 下载 Tomcat(6以上版本),另外可以根据系统下载 3 ...

  2. linux centos中使用yum安装tomcat

    在linux下部署java开发的web应用,一般采用Tomact+jre环境(可不需要apache),在RHEL和CentOS下,可以采用yum在线自动安装方式安装,具体操作如下: 可以先查看tomc ...

  3. Mysql-ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'

    方法一:1.关闭mysql   # service mysqld stop2.屏蔽权限   # mysqld_safe --skip-grant-table   屏幕出现: Starting demo ...

  4. Selenium+WebDriver+Python 定时控制任务

    为了更对得起"自动化测试"的名号,我们可以设置定时任务,使我们自动化脚本在某个时间点自动运行脚本,这样就可以让测试在夜间进行,减少了时间成本.通过程序来控制test case在什么 ...

  5. 网络爬虫2--PHP/CURL库（client URL Request Library）

    PHP/CURL库功能   多种传输协议.CURL(client URL Request Library),含义是“客户端URL请求库”. 不像上一篇所用的PHP内置网络函数,PHP/CURL支持多种 ...

  6. 【bzoj2705】 SDOI2012—Longge的问题

    http://www.lydsy.com/JudgeOnline/problem.php?id=2705 (题目链接) 题意 给定一个整数N,你需要求出∑gcd(i, N)(1<=i <= ...

  7. Hash_集合

    #include <iostream> #include <cstdio> #include <algorithm> #include <cstring> ...

  8. Jenkins参数化构建插件，实现构建前输入自定义参数

    插件: [Build with Parameters]:https://wiki.jenkins-ci.org/display/JENKINS/Build+With+Parameters+Plugin ...

  9. hdu 5035 概率题

    直接推公式的题目了.... Refer:http://blog.csdn.net/u012139398/article/details/39458623 https://www.zybuluo.com ...

  10. AngularJs ngChange、ngChecked、ngClick、ngDblclick

    ngChange 当用户更改输入时,执行给定的表达式.表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同. 格式:ng-change=”v ...