js之select标签应用移动水果 - ellaha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        select {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
    <script>
        window.onload = function () {
            var all = document.getElementById('all');
            var select = document.getElementById('select');
            var btn1 = document.getElementById('btn1');
            var btn2 = document.getElementById('btn2');
            var btn3 = document.getElementById('btn3');
            var btn4 = document.getElementById('btn4');
            // 全选
            btn1.onclick = function () {
                // 先获取子元素个数 将来再发生变化不会受到影响
　　　　　　　　//现在len的值始终是当前获取到的all.children.length 当前个数为5
                var len = all.children.length;
                for (var i=0; i < len; i++) {
                    var option = all.children[0];
                    option.selected = false;
                    select.appendChild(option);
                }
                
                // 使用这种方式移动子元素的话 如果子元素有时间 移动后元素的事件消失
                select.innerHTML = all.innerHTML;
                // 如果子元素有事件 此时会发生内存泄漏(该释放的对象内存没有被释放)
                all.innerHTML = '';   // 清空子元素
            } 
            // 反选
            btn2.onclick = function () {
                var len = select.children.length;
                for (var i=0; i < len; i++) {
                    var option = select.children[0];
                    option.selected = false;
                    all.appendChild(option);
                }
            }
            // 移动选中的水果
            btn3.onclick = function () {
                // 存储所有被选中的水果
                var array = [];
                for (var i=0; i < all.children.length; i++) {
                    var option = all.children[i];
                    if (option.selected) {
                        array.push(option);
                        // 去掉当前的option的选中状态
                        option.selected = false;
                    }
                }
                // 把数组中的option移动到第二个select中
                for (var j=0; j < array.length; j++) {
                    select.appendChild(array[j]);
                }
            }

            // 移动选中的水果
            btn4.onclick = function () {
                // 存储所有被选中的水果
                var array = [];
                for (var i=0; i < select.children.length; i++) {
                    var option = select.children[i];
                    if (option.selected) {
                        array.push(option);
                        // 去掉当前的option的选中状态
                        option.selected = false;
                    }
                }
                // 把数组中的option移动到第二个select中
                for (var j=0; j < array.length; j++) {
                    all.appendChild(array[j]);
                }
            }
        }
    </script>
</head>
<body>
<select name="" multiple="multiple" id="all">
    <option value="">苹果</option>
    <option value="">西瓜</option>
    <option value="">猴蜜桃</option>
    <option value="">菠萝</option>
    <option value="">草莓</option>
</select>
<input type="button" value=">>" id="btn1">
<input type="button" value="<<" id="btn2">
<input type="button" value=">" id="btn3">
<input type="button" value="<" id="btn4">
<select name="" multiple="multiple" id="select"></select>
</body>
</html>
posted on 2021-03-18 08:04 ellaha 阅读(115) 评论(0) 收藏举报
刷新页面返回顶部