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>

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