Javascript: How to copy all options from one select element to another?

How can I copy all options of one select element to another? Please give me the easiest way, I'm allergic to looping.

Please help me. Thanks in advance!

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;

One of the easiest ways without looping, is using jquery (select1 = id of select 1, select2 = id of select 2):

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

Without jquery:

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

I maintain some IE11 "compatibility mode" pages which run like IE7, and the pure javascript solution above did not work for me. The first opening option tag would inexplicably be stripped using a direct innerHTML assignment.

What worked for me was explicitly appending each option in the select's option collection to the new select. In this instance it was to support an AJAX call, so I cleared the list first, but I'm sure this could append as well.

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);
}

Hopefully this helps anyone else who is stuck in compatibility mode, since this page was at the top of the list in a Google search.

use 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);
    );
});

you can do that easily via 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.

Its an older thread but I hope the following helps someone. No loops at all.

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>

来源：https://stackoverflow.com/questions/6198684/javascript-how-to-copy-all-options-from-one-select-element-to-another

标签

javascript

html

select

option