lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select{
            width: 150px;
            height: 200px;
            display: block;
        }
        button{
            display: block;
            width: 150px;
            margin-top: 20px;
        }
        .left-box,.right-box{
            margin-right: 30px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="left-box">
        <select multiple id="left-sel">
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
            <option>选项四</option>
            <option>选项五</option>
            <option>选项六</option>
            <option>选项七</option>
        </select>
        <button id="left-sel-btn">选中项移动到右侧</button>
        <button id="left-all-btn">全部移动到右侧</button>
    </div>
    <div class="right-box">
        <select id="right-sel" multiple>
            <option>选项八</option>
        </select>
        <button id="right-sel-btn">选中项移动到左侧</button>
        <button id="right-all-btn">全部移动到右侧</button>
    </div>

    <script>
        var oLeftSel = document.getElementById("left-sel");
        var oRightSel = document.getElementById("right-sel");
        var lefSelBtn = document.getElementById("left-sel-btn");
        var rightSelBtn = document.getElementById("right-sel-btn");
        var leftAllBtn = document.getElementById("left-all-btn");
        var rightAllBtn = document.getElementById("right-all-btn");
        // 实现双击选中项移动到右侧
        oLeftSel.ondblclick = function(){
            // 通过选中项的索引获取选中项
            // var selOption = this.options[this.selectedIndex];
            // 通过选中项集合获取选中项
            var selOption = this.selectedOptions[0];
            // 将选中项添加到右侧
            oRightSel.appendChild(selOption);
        }
        // 实现双击选中项移动到左侧
        oRightSel.ondblclick = function(){
            // 获取当前选中项
            var selOption = this.options[this.selectedIndex];
            // 将选中项添加到左侧
            oLeftSel.appendChild(selOption);
        }

        // 实现选中项移动到右侧
        lefSelBtn.onclick = function(){
            // 获取左侧选中项集合
            var aSelOption = oLeftSel.selectedOptions;
            var selArr = [];
            // 创建新数组保存选中项
            for(var i=0;i<aSelOption.length;i++){
                selArr.push(aSelOption[i]);
            }
            for(var j = 0;j<selArr.length;j++){
                // 将选中项添加到右侧
                oRightSel.appendChild(selArr[j]);
            }
            
        }

        // 实现选中项移动到左侧
        rightSelBtn.onclick = function(){
            // 获取右侧选中项集合
            var aSelOption = oRightSel.selectedOptions;
            // 创建新数组保存选中项
            var selArr = [];
            for(var i=0;i<aSelOption.length;i++){
                selArr.push(aSelOption[i]);
            }
            // 将选中项添加到左侧
            for(var j = 0;j<selArr.length;j++){
                oLeftSel.appendChild(selArr[j]);
            }
        }

        // 实现全部选中项移动到右侧
        leftAllBtn.onclick = function(){
            var allOption = oLeftSel.innerHTML;
            oRightSel.innerHTML += allOption;
            oLeftSel.innerHTML = "";
        }
        // 实现全部选中项移动到左侧
        rightAllBtn.onclick = function(){
            oLeftSel.innerHTML += oRightSel.innerHTML;
            oRightSel.innerHTML = "";
        }
        
    </script>
</body>
</html>