Javascript：如何将所有选项从一个选择元素复制到另一个？

如何解决Javascript：如何将所有选项从一个选择元素复制到另一个？

| 如何将一个select元素的所有options复制到另一个？请给我最简单的方法，我对循环过敏。请帮我。提前致谢！

解决方法

的HTML：

<select id=\"selector_a\">
    <option>op 1</option>
    <option>op 2</option>
</select>

<select id=\"selector_b\">
    <option>op 3</option>
    <option>op 4</option>
</select>

javascript：

var first = document.getElementById(\'selector_a\');
var options = first.innerHTML;

var second = document.getElementById(\'selector_b\');
var options = second.innerHTML + options;

second.innerHTML = options;

, 没有循环的最简单方法之一是使用jquery（select1=选择1的ID，select2=选择2的ID）：

$(\'#select1 option\').clone().appendTo(\'#select2\');

没有jquery：

var select1 = document.getElementById(\"select1\");
var select2 = document.getElementById(\"select2\");
select2.innerHTML = select2.innerHTML+select1.innerHTML;

, 我维护了一些像IE7一样运行的IE11“兼容模式”页面，而上面的纯JavaScript解决方案对我来说不起作用。使用直接的innerHTML分配会莫名其妙地剥离第一个开始选项标签。对我有用的方法是，将select \ option集合中的每个选项明确附加到新的select中。在这种情况下，它支持AJAX调用，因此我首先清除了列表，但是我敢肯定，它也可以追加。

var fromSelect = document.getElementById(\'a\');
var toSelect = document.getElementById(\'b\');
toSelect.innerHTML = \"\";
for (var i = 0; i < fromSelect.options.length; i++) {
    var option = fromSelect.options[i];
    toSelect.appendChild(option);
}

希望这对陷入兼容模式的其他人有所帮助，因为此页面位于Google搜索列表的顶部。 , 使用jQuery foreach？

$(\"#the-id option\").each(function() {
    var val = $(this).val();
    var txt = $(this).html();
    $(\"the-other-id\").append(
        $(\'<option></option>\').val(val).html(txt);
    );
});

, 您可以通过jquery轻松做到这一点：

<select id=\"sel1\">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<select id=\"sel2\">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

$(document).ready(function(){
    $(\"#sel2\").html($(\"#sel1\").html());
});

$(\'#cloneBtn\').click(function() {
    var $options = $(\"#myselect > option\").clone();
    $(\'#second\').empty();
    $(\'#second\').append($options);
    $(\'#second\').val($(\'#myselect\').val());
});

 This is used to copy the value and the innerHTML. Its better to copy the key,value and the OPTIONS.i.e. the selected value and the options.

, 它的线程较旧，但我希望以下内容对某人有所帮助。完全没有循环。

function copyFromMultiselect(srcId,targetId,allFlag){
    if(allFlag){
        $(\"#\"+targetId).append($(\"#\"+srcId).html());
        $(\"#\"+srcId).empty();
    }else{
        $(\"#\"+targetId).append($(\"#\"+tabContentId+\" #\"+srcId+\" option:selected\"));
    }
  }

    //first ans can be modified as follows to get direct result while using dropdown
    <html>
    <head>
    <script>
    onload
    function myFunction1(){     
    var first = document.getElementById(\'selector_a\');
    var second = document.getElementById(\'selector_b\');
    var chk=document.getElementById(\'selector_main\').value;
        if(chk == \"1\")
        var options = first.innerHTML;
        else
        var options = second.innerHTML;
    var out = document.getElementById(\'selector_c\');
    out.innerHTML = options;
    }
    </script>
    </head>
    <body onload=\"myFunction1()\">
    <select id=\"selector_main\" onchange=\"myFunction1()\">
    <option value=\"none\" disabled>--choose--</option>
    <option value=\"1\">option_A</option>
    <option value=\"2\">option_B</option>
    </select>
    <select id=\"selector_a\" hidden>
    <option value=\"none\" disabled>--select--</option>
    <option>op1</option>
    <option>op 2</option>
    </select>

    <select id=\"selector_b\" hidden>
    <option value=\"none\" disabled>--select--</option>
    <option>op 3</option>
    <option>op 4</option>
    </select>
    <select id=\"selector_c\">
    <option>--select col1 first--</option>   
    </select>
    </body>
    </html>