js之水果选择小案例

案例中有四个按钮,
第一个将左边的下拉框内容全部移动到右边,
第二个将右边的下拉框内容全部移动到左边,
第三个将左边选中的移动到右边
第四个将右边选中的移动到左边

<script>
    var left = my$('selLeft');
    var right = my$('selRight');

    // 全部移动到右边的点击事件
    my$('btn1').onclick = function () {
        // 把左边的内容加给右边
        right.innerHTML += left.innerHTML;
        // 并把左边的内容清空
        left.innerHTML = '';
    }

    // 全部移动到左边的点击事件
    my$('btn2').onclick = function () {
        // 把右边的内容加给左边
        left.innerHTML += right.innerHTML;
        // 并把右边的内容清空
        right.innerHTML = '';
    }

     // 添加到右边的点击事件
    my$('btn3').onclick = function () {
        // 遍历左边的option找到被选中的
       for (var i = 0; i < left.children.length; ) {
            left.children[i].selected ? right.appendChild(left.children[i]) : i++;
         }
    }

     // 添加到左边的点击事件
     my$('btn4').onclick = function () {
         // 遍历右边的option找到被选中的
         for (var i = 0; i < right.children.length;) {
             right.children[i].selected ? left.appendChild(right.children[i]) : i++;
         }
     }
</script>

这里主要是对于后两个标签的处理需要记录一下,虽然有很多种处理的方式,但是目前比较看好这种.

在循环遍历查找被选中元素的时候,符合条件的元素会被移动到另外一个下拉框中,这样会改变参与循环的元素的个数,会导致跳过一个元素的遍历,我们也可以用i- - ,或者是倒序遍历的方式来处理,但是没有上述的优秀,哈哈.