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

最新推荐文章于 2024-05-31 10:26:40 发布

寒暄

最新推荐文章于 2024-05-31 10:26:40 发布

阅读量123

点赞数

分类专栏： ▶寒暄_前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_41106844/article/details/105554058

版权

▶寒暄_前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

总目录：https://blog.csdn.net/qq_41106844/article/details/105553392

前端 - 子目录：https://blog.csdn.net/qq_41106844/article/details/105553354

<!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>

寒暄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
4.6JavaScript --练习左右菜单移动

总目录：https://www.jianshu.com/p/8b3e5b2b4497前端 - 子目录：https://www.jianshu.com/p/6fdb59d92e43<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti...
复制链接

扫一扫