Js小案例之选择水果

选择水果移到另一个选择框中:

一种是全部移过去，还有一种是将选中内容的移过去

第一种就使用一个for循环将其全部移过去

由于每移动一次，长度都会发生变化，所以在这里，我们需要使用倒序的for循环，将其移过去

而第二种在第一种的基础上加上一个判断是否选中的条件就行了

js代码如下:

<script>
    var sel1 = document.getElementById("sel1");
    var sel2 = document.getElementById("sel2");
    var btnArr = document.getElementsByTagName("button");

    btnArr[0].onclick = function(){
        move(sel1,sel2);
    }

    btnArr[1].onclick = function(){
        move(sel2,sel1);
    }

    btnArr[2].onclick = function () {
        moveAll(sel1,sel2);
    }

    btnArr[3].onclick = function(){
        moveAll(sel2,sel1);
    }
    /**
     * 全部移动
     * @param ele1
     * @param ele2
     */
    function moveAll(ele1,ele2){
        //获取ele1元素下的所有子元素
        var arr = ele1.children;
        for(var i = arr.length - 1;i >= 0;i--){
            ele2.appendChild(arr[i]);
        }
    }

    /**
     * 移动选中的元素
     * @param ele1
     * @param ele2
     */
    function move(ele1,ele2){
        var arr = ele1.children;
        for(var i = arr.length - 1;i >= 0;i--){
            if(arr[i].selected){
                arr[i].selected = false;
                ele2.appendChild(arr[i]);
            }
        }
    }
</script>

这样就能实现水果的移动了