27

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!

aynber
  • 22,380
  • 8
  • 50
  • 63
kazinix
  • 28,987
  • 33
  • 107
  • 157
  • 4
    Maybe someone will find it helpful. I had a similar task, I wanted to replicate a select over all rows of a table column. I used sel1 = sel0.cloneNode(true) – Singagirl Jul 11 '16 at 02:45
  • Very useful, @Singagirl. Thank you! Just be aware to change the id later. – Rodrigo Feb 13 '17 at 01:02
  • +1 for this. Other answers didn't work to copy one Select to a new Select, without retaining links to the old one (not a true clone), or the other answers were much more than what I needed – Daniel Bragg Mar 05 '19 at 17:29

8 Answers8

42

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;
manji
  • 47,442
  • 5
  • 96
  • 103
31

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;
helle
  • 11,183
  • 9
  • 56
  • 83
4

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.

Lathejockey81
  • 1,198
  • 7
  • 8
2

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);
    );
});
Mohamed Nuur
  • 5,536
  • 6
  • 39
  • 55
2

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());
});
melaos
  • 8,386
  • 4
  • 56
  • 93
0
$('#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.
Sumeet Patil
  • 422
  • 3
  • 14
0

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"));
    }
  }
Fawad Shah
  • 1,680
  • 4
  • 15
  • 21
-2
    //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>
Nikhil Sahu
  • 1
  • 1