CODEWITHSUNDEEP
jqueryhtmlformsselectclone
diggersworld
diggersworld

Reputation: 13080

JQuery clone <select> element

I want to clone a <select> input in HTML using JQuery.
I'm not sure how to go about it, so thought I'd ask here.

Particularly interested in the best way to write it back into the document as well.

My select element looks like this:

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

Thanks.

Upvotes: 20

Views: 54415

Answers (5)

user9054011
user9054011

Reputation: 1

you can attr option selected true with select change, then use clone is ok.

$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});

$("#options").off("change").on("change", function() {
    var val = $(this).val();

    $(this).find("option[value=" + val + "]").attr("selected", true);
});

Upvotes: 0

jesal
jesal

Reputation: 7948

Only problem with the accepted answer is that if your select contains optgroups they will not be copied over. In that case, the easiest way I found was to just do this:

$('#options2').html($('#options').html());

Upvotes: 11

user754952
user754952

Reputation: 111

How about this?

<select id="options">
    <option value="1">Opt 1</option>
    <option value="2">Opt 2</option>
    <option value="3">Opt 3</option>
</select>

//target 

<select id="options2">
</select>

$('#options').find('option').clone().appendTo('#options2');

Thanks.

Upvotes: 11

CuriousCurmudgeon
CuriousCurmudgeon

Reputation: 396

jQuery has a clone method built-in. There are many options for how to add the cloned element back in. The proper choice is dependent on your application.

Upvotes: 0

Plaudit Design
Plaudit Design

Reputation: 1156

See: http://api.jquery.com/clone/

$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');

appendTo(...) is only one way to insert the cloned elements. Other methods can be found here: http://api.jquery.com/category/manipulation/

Upvotes: 31

Related Questions