DOM操作下拉选项框左右移动

最新推荐文章于 2023-01-02 16:22:09 发布

weixin_40442639

最新推荐文章于 2023-01-02 16:22:09 发布

阅读量667

点赞数

本文链接：https://blog.csdn.net/weixin_40442639/article/details/104925532

版权

页面：

在这里插入图片描述
HTML部分：

    <style>
         #sel{
            width: 100px;
        }
        #unsel{
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <select id="unsel" name="" multiple="multiple" size="10">
               <option>程序员</option>
               <option>幼师</option>
               <option>医生</option>
               <option>消防员</option>
               <option>营养师</option>
               <option>Amricen</option>
               <option>China</option>
               <option>Japan</option>
               <option>Kareo</option>
               <option>France</option>
        </select>
        <!-- <div> -->
            <!-- 全部右移 -->
            <button id="btn1">&gt;&gt;</button>
            <!-- 右移 -->
            <button id="btn2">&gt;</button>
            <!-- 左移 -->
            <button id="btn3">&lt;</button>
            <!-- 全部左移 -->
            <button id="btn4">&lt;&lt;</button>
        <!-- </div> -->
        <select id="sel" name="" size="10" multiple></select>
    </div>

需求分析：
// 需求分析：
1.点击全部右移，将左边的所有子元素添加到右边的框中
2.点击全部左移，将右边所有子元素添加到左边的框中
3.点击右移，将左边的选中子元素添加到右边的框中
4.点击左移，将右边选中的子元素添加到左边的框中

JS代码部分：

<script>

        //  需求分析：
        // 1.点击全部右移，将左边的所有子元素添加到右边的框中
        // 2.点击全部左移，将右边所有子元素添加到左边的框中
        // 3.点击右移，将左边的选中子元素添加到右边的框中
        // 4.点击左移，将右边选中的子元素添加到左边的框中 

        // 获取元素
        var unsel =document.getElementById("unsel");
        var sel = document.getElementById("sel");
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");

        // 注册事件
        // 全部右移
        btn1.onclick = function(){
            // for(var i =0;unsel.children.length;i++){
            //       sel.appendChild(unsel.children[i]);  //将左侧的所有子元素 移向 右边的select元素
            //       i--;
            // }
            moveAll(unsel,sel);
        }
        //注册事件 全部左移
        btn4.onclick =function(){
            // for(var i =0;sel.children.length;i++){
            //   unsel.appendChild(sel.children[i]);
            //   i--;
            // }
            moveAll(sel,unsel);
        }
        // 注册事件选中右移
        btn2.onclick= function(){
            moveSele(unsel,sel);

**右移方法一**
            // 封装前
            // for(var i =0;unsel.children.length;i++){
            // 判断选中的元素
            //   if(unsel.children[i].selected){   
            //将选中的元素 移动到目标元素中
            //      sel.appendChild(unsel.children[i]);
            //      i--;
            //     // console.log(i);
            //   }
            // }
        }
        //注册事件  右移
        // 注册事件左移
        btn3.onclick = function(){
            moveSele(sel,unsel);

 **左移方法一：**
            // 封装前
            // for(var i =0;sel.children.length;i++){
            //判断选中元素
            //    if(sel.children[i].selected){
            //将选中元素添加到目标元素中
            //       unsel.appendChild(sel.children[i]);
            //       i--;
            //    }
            // }
        }

    //    全部移动封装
    function moveAll(fromEle,toEle){
        for(var i =0;fromEle.children.length;i++){
              toEle.appendChild(fromEle.children[i]);
              i--;
            }
    }
    //   选中移动封装
    function moveSele(fromEle,toEle){
        for(var i =0;fromEle.children.length;i++){
              if(fromEle.children[i].selected){   
                 toEle.appendChild(fromEle.children[i]);
                 i--;
                 //  问题：在循环体中不要i++,或在移动元素后不自减，在多选的情况下只能移动一个元素
                 //情况也上面的一样。解决方，就是在移动一个元素后添加自减。避免选中的元素没有被遍历到
              }
            }
    }
**//  右移方法二 ：通过遍历option元素来右移**
        // btn2.onclick = function(){
        //     // 获取所有选项的元素 （左侧）
        //     var ropt = unsel.options;
        //     // 遍历所有选项对象
        //     for(var i =0;i<ropt.length;i++){
        //        var op = ropt[i];  // 将遍历到的元素赋值给 op  
        //        //如果选项被选中，将该元素添加到右边的选项框中
        //        //实现右移
        //        if(op.selected){
        //          sel.appendChild(op);
        //          //  怎样让下拉框 不 默认选中 
        //         //  break;
        //         i--;
        //        }
        //     }
**左移方法二：通过遍历option 来左移**
            //注册事件  左移
        // btn3.onclick = function(){
        //     // 获取所有选项元素 （右侧）
        //     var lopt = sel.options;
        //     // 遍历所有选项的对象
        //     for(var i =0;i<lopt.length;i++){
        //        var opl =lopt[i];  // 将遍历的元素赋值给 opl
        //      // 如果选项被选中，将元素添加到左侧的选项框中
        //      //实现左移
        //        if(opl.selected){
        //           unsel.appendChild(opl);
        //         // sel.onblur();
        //           // break;
        //           i--;
        //        }
        //     }
        // }
     
    </script>

       ****问题：****
     当全选右移的时候，只移动了一部分，剩下部分没有移动
     分析：在for循环体内不要i++遍历无法获取到元素（死循环）
     添加了i++（循环自增后），当第一个元素右移后，后面的元素会自动补齐，
     循环体的变量在自增，导致元素一部分无法获取到
   解决：
   在元素右移后自减 i--