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

javascript html select option
dpp picture dpp · Jun 1, 2011 · Viewed 50.7k times · Source

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!

Answer

manji picture manji · Jun 1, 2011

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;

Related questions

Can I apply the required attribute to <select> fields in HTML5?

How can I check if a user has selected something from a <select> field in HTML5? I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something …

Read More
Links in <select> dropdown options

Is it possible for each dropdown options to link somewhere when selected without the need for an external button? <select> <option value="x">x</option> <option value="y">y</option> &…

Read More
create unique id with javascript

I have a form where a user can add multiple select boxes for multiple cities. The problem is that each newly generated select box needs to have a unique id. Can this be done is JavaScript? UPDATE: here is the …

Read More