4.6JavaScript --练习左右菜单移动

总目录：//www.greatytc.com/p/8b3e5b2b4497
前端 - 子目录：//www.greatytc.com/p/6fdb59d92e43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右移</title>
</head>
<body>

<div id="box1">
    <select multiple="multiple" size="10" id="left">
        <option>book</option>
        <option>book2</option>
        <option>book3</option>
        <option>book4</option>
        <option>book5</option>
        <option>book6</option>
    </select>
</div>


<div id="choice">
    <input class="add"        type="button" value="--->" onclick="add()"><br>
    <input class="remove"     type="button" value="<---" onclick="remove();"><br>
    <input class="add-all"    type="button" value="===>" onclick="ADDall()"><br>
    <input class="remove-all" type="button" value="<===" onclick="remall()">
</div>


<div>
    <select multiple="multiple" size="10" id="right">
        <option>book9</option>
    </select>
</div>

<script>

     function add(){
         var right=document.getElementById("right");
         var options=document.getElementById("left").getElementsByTagName("option");

         for (var i=0; i<options.length;i++){

             var option=options[i];

             if(option.selected==true){
                   right.appendChild(option);
                 i--;
             }

         }

     }

    function ADDall(){
        var right=document.getElementById("right");
        var options=document.getElementById("left").getElementsByTagName("option");
        for (var i=0; i<options.length;i++){
             var option=options[i];
             right.appendChild(option);
             i--;
        }
    }


    function remove(){
        var right=document.getElementById("right").getElementsByTagName("option");
        var options=document.getElementById("left");

        for (var i=0; i< right.length;i++){

            var option= right[i];

            if(option.selected==true){
                  options.appendChild(option);
                i--;
            }
        }
    }

   function remall(){
        var right=document.getElementById("right").getElementsByTagName("option");
        var options=document.getElementById("left");
        for (var i=0; i< right.length;i++){
            var option= right[i];
            options.appendChild(option);
            i--;
        }
   }

</script>
</body>
</html>
4.6JavaScript --练习 左右菜单移动

推荐阅读更多精彩内容

4.6JavaScript --练习左右菜单移动
