js实现-下拉列表左右选择

Posted sunli0205

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现-下拉列表左右选择相关的知识,希望对你有一定的参考价值。

下拉列表左右选择
          * 下拉选择框
               <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实现-下拉列表左右选择的主要内容,如果未能解决你的问题,请参考以下文章

使用JavaScript完成控制下拉列表左右选择

jQuery学习——使用JQ完成下拉列表左右选择

selenium python 针对js生成的下拉列表,如何选择隐藏的选项

JQuery应用:实现下拉列表选择一项,然后在第二个下拉列表显示全部。谢谢了 请一定帮我做一下!200分!

如何在文本区域标签中的特定光标位置插入选择标签下拉值作为文本片段?

下拉列表左右选择案例