lovecoding
/
web0715


			
				
					
						
						
							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>
        .box1,.box2{
            float: left;
            margin-right: 20px;
        }
        select{
            width: 100px;
            height: 200px;
        }
        button{
            display: block;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <select multiple id="sel-left">
            <option>选项一</option>
            <option>选项二</option>
            <option>选项三</option>
            <option>选项四</option>
            <option>选项五</option>
            <option>选项六</option>
        </select>
        <button id="sel-left-btn">选中移动到右侧</button>
        <button id="all-left-btn">全部移动到右侧</button>
    </div>
    <div class="box2">
        <select multiple id="sel-right">
            <option>选项七</option>
        </select>
        <button id="sel-right-btn">选中移动到左侧</button>
        <button id="all-right-btn">全部移动到左侧</button>
    </div>
    <script>
        var oSelLeft = document.getElementById("sel-left");
        var oSelRight = document.getElementById("sel-right");
        var selLeftBtn = document.getElementById("sel-left-btn");
        var selRightBtn = document.getElementById("sel-right-btn");
        var allLeftBtn = document.getElementById("all-left-btn");
        var allRightBtn = document.getElementById("all-right-btn");
        // 左侧下拉列表的双击事件
        oSelLeft.ondblclick = function(){
            // console.log(this.selectedOptions);
            // console.log(this.options);
            // console.log(this.selectedIndex);
            // console.log(this.options[this.selectedIndex]);
            // 获取双击的选中项
            var selOption = this.selectedOptions[0];
            // 将选中项移动到右侧下拉列表中
            oSelRight.append(selOption);
        }

        // 右侧下拉列表的双击事件
        oSelRight.ondblclick = function(){
            var selOption = this.selectedOptions[0];
            oSelLeft.append(selOption);
        }

        // 左侧下拉框选中移动到右侧下拉框
        selLeftBtn.onclick = function(){
            var selOptions = oSelLeft.selectedOptions;
            var selArr = [];
            for(var j=0;j<selOptions.length;j++){
                selArr.push(selOptions[j]);
            }
            for(var i=0;i<selArr.length;i++){
                oSelRight.append(selArr[i])
            }
        }

        //右侧下拉框选中移动到左侧
        selRightBtn.onclick = function(){
            var selOptions = oSelRight.selectedOptions;
            var selArr = [];
            for(var i=0;i<selOptions.length;i++){
                selArr.push(selOptions[i]);
            }
            for(var j=0;j<selArr.length;j++){
                oSelLeft.append(selArr[j]);
            }
        }

        //左侧全部移动到右侧按钮
        allLeftBtn.onclick = function(){
            //方法一
            // var allOption = [];
            // for(var j=0;j<oSelLeft.options.length;j++){
            //     allOption.push(oSelLeft.options[j])
            // }
            // for(var i=0;i<allOption.length;i++){
            //     oSelRight.append(allOption[i]);
            // }

            // oSelRight.innerHTML = oSelRight.innerHTML + oSelLeft.innerHTML;
            oSelRight.innerHTML += oSelLeft.innerHTML;
            oSelLeft.innerHTML = "";
        }

        // 右侧全部移动到左侧按钮
        allRightBtn.onclick = function(){
            oSelLeft.innerHTML += oSelRight.innerHTML;
            oSelRight.innerHTML = "";
        }

    </script>
</body>
</html>