左右两个下拉框里的内容互换

最新推荐文章于 2020-12-30 09:43:54 发布

18790970257

最新推荐文章于 2020-12-30 09:43:54 发布

阅读量249

点赞数

原文链接：http://www.cnblogs.com/sunbo123/p/7253469.html

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <select id="left_slt" size="7" multiple="multiple" style="width: 150px;">
            <option>ABC</option>
            <option>123</option>
            <option>xyz</option>
            <option>IJK</option>
        </select>
        <input type="button" id="to_right" value="向右" />
        <input type="button" id="to_left" value="向左" />
        <select id="right_slt" size="7" style="width: 150px;"></select>
    </body>

</html>
<script>
    var left_slt = document.getElementById('left_slt');
    var right_slt = document.getElementById('right_slt');

    document.getElementById('to_right').onclick = function() {
            for(var i =0;i<left_slt.selectedOptions.length;){
                    right_slt.appendChild(left_slt.selectedOptions[i]);
                    
                }
        
        
    }
    document.getElementById('to_left').onclick = function() {
            for(var i =0;i<right_slt.selectedOptions.length;){
                    left_slt.appendChild(right_slt.selectedOptions[i]);
                    
                }
        
        
    }
</script>

利用下拉菜单的方法在某一个框里写入一些内容，然后利用selectedoption或者selectedindex来选中某一框内的某一内容appendChild将选中的内容加入到另一个框中。可以通过input的方法定义两个按钮：向左移还是向右移，并且在从一个框移到另外一个框后所以移动的内容会直接在原框内删除。增加了用户的体验性!

转载于:https://www.cnblogs.com/sunbo123/p/7253469.html