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

Posted 2020-09-30 军师联盟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右两个下拉框里的内容互换相关的知识，希望对你有一定的参考价值。

<!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的方法定义两个按钮：向左移还是向右移，并且在从一个框移到另外一个框后所以移动的内容会直接在原框内删除。增加了用户的体验性!

以上是关于左右两个下拉框里的内容互换的主要内容，如果未能解决你的问题，请参考以下文章

Excel 如何将筛选功能下拉框里的数据导出来

文本框里的字怎么上下居中

想用JS做一个下拉框，下拉框里的值根据当前年份自动往前和往后添加5年，如当前是2010年，值就为2005~2015

robot framework + selenium 如何处理此类的下拉框如何选中下拉框里的值

C# winform datagridview 里的下拉框中既可以从下拉框里选择数据，也可以让客户自己手动往里输入数据，怎

jQuery之双下拉框