前端学习笔记day13 动态创建元素实例--多选移动全部移动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select {
            width: 300px;
            height: 200px;
            background-color: pink;
            text-align:center;
            line-height: 50px;
            font-size: 18px;
            margin-top: 200px;
        }
    </style>
    <script src="common.js"></script>
</head>
<body>
    <select id='left' multiple='multiple'>
        <option value="1">小明</option>
        <option value="2">小花</option>
        <option value="3">小丽</option>
        <option value="4">小强</option>
        <option value="5">小红</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 id='right' multiple='multiple'></select>

    <script>
        var left = document.getElementById('left');
        var right = document.getElementById('right');
        var btn1 = document.getElementById('btn1');
        btn1.onclick = function() {
            var leftLen = left.children.length;
            for (var i = 0;i < leftLen;i++) {
            right.appendChild(left.children[0]);
            right.children[i].selected = false; 
            }    
        }
        var rightArr = [];
        var btn2= document.getElementById('btn2');
        btn2.onclick = function() {
            for (var i = 0;i < right.children.length;i++) {
                rightArr.push(right.children[i]);
            }
            for (var i = 0;i < rightArr.length;i++) {
                left.appendChild(rightArr[i]);
                left.children[i].selected = false;
            }
            rightArr = [];
        }
        
        var leftArr = [];
        var btn3 = document.getElementById('btn3');
        btn3.onclick = function() {
            for (var i = 0;i < left.children.length;i++) {
                if (left.children[i].selected) {
                    leftArr.push(left.children[i])
                }
            }
            for (var i = 0;i < leftArr.length;i++) {
                right.appendChild(leftArr[i]);
                right.children[i].selected = false;
            }
            leftArr = [];
        }
        rightArr = [];
        var btn4 = document.getElementById('btn4');
        btn4.onclick = function() {
            for (var i = 0;i < right.children.length;i++) {
                if (right.children[i].selected) {
                    rightArr.push(right.children[i])
                }
            }
            for (var i = 0;i < rightArr.length;i++) {
                left.appendChild(rightArr[i]);
                left.children[i].selected = false;
            }
            rightArr = [];
        }
        
        

    </script>
</body>
</html>
运行结果：
前端学习笔记day13 动态创建元素实例--多选移动 全部移动

猜你喜欢

前端学习笔记day13 动态创建元素实例--多选移动全部移动
