Say I have a select:

<select id="mySelect">
 <option value="1">First</option>
 <option value="2">Second</option>
 <option value="3">Third</option>
</select>

I would like to clone all the options without having to clone the select. Is this possible? Cloning the select is not possible in my situation.

I thought of doing something like this:

$('#mySelect').html().clone();

but that did not work.

Update:

I have a select that will change over time. I have a second select in a modal. When the modal is called, I need to update the modal's select with the same options as the first modal. Both selects have different attributes, thus I can't clone the select.

Say I have a select:

<select id="mySelect">
 <option value="1">First</option>
 <option value="2">Second</option>
 <option value="3">Third</option>
</select>

I would like to clone all the options without having to clone the select. Is this possible? Cloning the select is not possible in my situation.

I thought of doing something like this:

$('#mySelect').html().clone();

but that did not work.

Update:

I have a select that will change over time. I have a second select in a modal. When the modal is called, I need to update the modal's select with the same options as the first modal. Both selects have different attributes, thus I can't clone the select.

• javascript
• jquery
• html

• Have you tried PHP? Please be more specific. – Krii Commented Apr 9, 2015 at 19:12
• Not an option either. This has to be done on the client. – kockburn Commented Apr 9, 2015 at 19:12
• 5 @Krii Where did you get PHP from? I see no mention of it in the post or the tags. – RandomWebGuy Commented Apr 9, 2015 at 19:12

3 Answers 3

The most straightforward way to copy the options from your primary select to the secondary select is to use html() as follows:

var options = $('#mySelect').html();
$('#mySelect2').html(options);

Or in one line:

$('#mySelect2').html($('#mySelect').html());

If you want to manipulate the options before copying to the other select, then you could use clone() to get an array of the individual select options as jQuery objects and alter the array before copying the entires to the other select. However, based on your updated requirement of simply copying the options from one select to another, using clone would definitely be overkill. But this is how you would do it:

var optionsArr = $('#mySelect option').clone();
console.log(optionsArr); // See the contents
// Manipulate and populate other select as needed

Give this a shot

$('#mySelect option').clone()

You can use clone() to generate the clones then appendTo to append the new option elements to a new select and then use appendTo again to append the new select to the body. This little trick works like a charm:

$('#'+original_id+' option').clone().appendTo($('<select id="'+new_id+'">').appendTo('body'));

Considering that you are appending the copy elements to the end of the body.

This is a demo that shows how you can generate the copies:

https://jsfiddle/m323ww1p/