下拉列表左右选择
          * 下拉选择框
               <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. C# JSon转换

    1. 先添加System.Web.Extensions.dll引用   var js = new System.Web.Script.Serialization.JavaScriptSerialize ...

  2. EF异常：“System.InvalidOperationException”类型的未经处理的异常在 mscorlib.dll 中发生

     实体框架System.Data.Entity.SqlServer提供者类型”. SqlProviderServices EntityFramework. 的在应用程序配置文件注册状态"置疑 ...

  3. C# String.Format格式说明

    C#格式化数值结果表 字符 说明 示例 输出 C 货币 string.Format("{0:C3}", 2) ＄2.000 D 十进制 string.Format("{0 ...

  4. C++强制类型转换操作符 static_cast

    static_cast是一个强制类型转换操作符.强制类型转换,也称为显式转换,C++中强制类型转换操作符有static_cast.dynamic_cast.const_cast.reinterpert ...

  5. 【codevs3945】 完美拓印

    http://codevs.cn/problem/3945/ (题目链接) 题意 给出一个诡异的图形,再给出一个歪七扭八的线,问图形上下两条边与线的匹配→_→ Solution 前后求差然后KMP,这 ...

  6. Nginx research, nginx module development

    catalog . 初探nginx架构 . handler模块 . Nginx编译.安装.配置 . Hello World模块开发 1. 初探nginx架构 nginx在启动后,在unix系统中会以d ...

  7. Ext FileSystem Family、Ext2、Ext3

    catalog . 简介 . Ext2文件系统 . Ext3文件系统 . 小结 1. 简介 VFS虚拟文件系统接口和数据结构构成了一个框架,各个文件系统的实现都必须在框架内运转,但这并不要求每个文件系 ...

  8. Can't exec "aclocal": No such file or directory at /usr/share/autoconf/Autom4te/FileUtils.pm line 326.

    今天执行:autoreconf -fvi的时候出现如下错误: autoreconf: Entering directory `.' autoreconf: configure.in: not usin ...

  9. POJ 2533 Longest Ordered Subsequence（最长上升子序列（NlogN）

    传送门 Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subseque ...

  10. ASP.NET WEB API 测试

    编码时测试: Postman + Fiddler4 Postman进行发包 Fiddler4进行抓包 编码结束后测试: 通过Nuget引入组件WebApiTestClient: 接口文档 类属性 测试