学习记录343@JS练习之两个下拉列表左右移动元素

最新推荐文章于 2022-08-07 13:30:03 发布

教练我想学编程

最新推荐文章于 2022-08-07 13:30:03 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/weixin_44663675/article/details/109537995

版权

如下，点击按钮移动元素

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload=function () {
            //选中添加到右边
            document.getElementById("left-right").onclick=function (){
                let left = document.getElementById("left");
                let leftOptions = left.getElementsByTagName("option");
                //必须倒序循环，因为length会减小
                for (var i=leftOptions.length-1;i>=0;i--){
                    if (leftOptions[i].selected){
                        right.appendChild(leftOptions[i]);
                    }
                }
            }
            //选中添加到左边
            document.getElementById("right-left").onclick=function (){
                let right = document.getElementById("right");
                let rightOptions = right.getElementsByTagName("option");
                for (var i=rightOptions.length-1;i>=0;i--){
                    if (rightOptions[i].selected){
                        left.appendChild(rightOptions[i]);
                    }
                }
            }
            //全部添加到右边
            document.getElementById("left-right-all").onclick=function (){
                let left = document.getElementById("left");
                let leftOptions = left.getElementsByTagName("option");
                for (var i=leftOptions.length-1;i>=0;i--){
                    right.appendChild(leftOptions[i]);
                }
            }
            //全部添加到左边
            document.getElementById("right-left-all").onclick=function (){
                let right = document.getElementById("right");
                let rightOptions = right.getElementsByTagName("option");
                for (var i=rightOptions.length-1;i>=0;i--){
                    left.appendChild(rightOptions[i]);
                }
            }
        }

    </script>
</head>
<body>

<select id="left" multiple="multiple" style="width: 110px;height: 100px">
    <option>AAAAA</option>
    <option>BBBBB</option>
    <option>CCCCC</option>
    <option>DDDDD</option>
</select>

<select id="right" multiple="multiple" style="width: 110px;height: 100px">
    <option>EEEEE</option>
    <option>FFFFF</option>
</select>
<br>
<input id="left-right" type="button" value="选中添加到右边"/>
<input id="right-left" type="button" value="选中添加到左边"/>
<br>
<input id="left-right-all" type="button" value="全部添加到右边"/>
<input id="right-left-all" type="button" value="全部添加到左边"/>
</body>
</html>

教练我想学编程

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习记录343@JS练习之两个下拉列表左右移动元素

如下，点击按钮移动元素代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload=function () { //选中添加到右边 .
复制链接

扫一扫