练习：下拉列表左移右移

最新推荐文章于 2021-08-22 21:45:02 发布

海边拾贝seebit

最新推荐文章于 2021-08-22 21:45:02 发布

阅读量458

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/Ada_yangyang/article/details/81295035

版权

Web前端专栏收录该内容

54 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="content-Type" content="text/html; charset=utf-8"/>
<head>
    <title>下拉框左右移动</title>
    <script type="text/javascript">
        function removeLeft(){
            //1.找到第一个下拉框
            var leftSelect = document.getElementById("left");
            //2.找到第一个下拉框中选中的项
            var selectedIndex = leftSelect.selectedIndex;//取当前选中项的下标
            var selectedOption = leftSelect.options[selectedIndex];
            //3.找到第二个下拉框
            var rightSelect = document.getElementById("right");
            //4.第二个下拉框中追加一个option
            rightSelect.appendChild(selectedOption)
        }
        function removeLeftAll(){
            //1.找到第一个下拉框
            var leftSelect = document.getElementById("left");
            var Options = leftSelect.options;
            var rightSelect = document.getElementById("right");
            //2.找到所有下拉选
//            for(var i=0;i<Options.length;){
//                rightSelect.appendChild(Options[i]);
//            }
            for(var i=Options.length-1;i>=0;i--){
                rightSelect.appendChild(Options[i]);
            }

        }
    </script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            <select size="10" id="left">
                <option>选项1</option>
                <option>选项2</option>
                <option>选项3</option>
                <option>选项4</option>
                <option>选项5</option>
                <option>选项6</option>
                <option>选项7</option>
                <option>选项8</option>
            </select>
        </td>
        <td>
            <input type="button" style="width:50px" value="--->" onclick="removeLeft()"/><br/>
            <input type="button" style="width:50px" value="===>" onclick="removeLeftAll()"/><br/>
            <input type="button" style="width:50px" value="<---" onclick="removeRight()"/><br/>
            <input type="button" style="width:50px" value="<===" onclick="removeRightAll()"/><br/>
        </td>
        <td>
            <select size="10" id="right">
                <option>选项9</option>
            </select>
        </td>
    </tr>
</table>
</body>
</html>