I have a button that is cloning an element on the page each time the user clicks it. It is duplicating a select list for them to choose another option.

However, its cloning the whole element including the option that was selected so all of the new ones appended have a default value which I dont want.

 globalLocales = $("<div />").append($('[name=localeID]:first').clone()).html();
 $('select').select2();

Is there a way I can remove the selected option during the cloning process so it doesn't carry over to the new element?

I tried using .removeProp('selected') in the append as well as .prop('selected',false); but that didn't work for me

I have a button that is cloning an element on the page each time the user clicks it. It is duplicating a select list for them to choose another option.

However, its cloning the whole element including the option that was selected so all of the new ones appended have a default value which I dont want.

 globalLocales = $("<div />").append($('[name=localeID]:first').clone()).html();
 $('select').select2();

Is there a way I can remove the selected option during the cloning process so it doesn't carry over to the new element?

I tried using .removeProp('selected') in the append as well as .prop('selected',false); but that didn't work for me

• javascript
• jquery

Share Improve this question Follow asked Nov 11, 2014 at 15:38 SBBSBB 8,9903535 gold badges118118 silver badges235235 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

One way to fix the proble is to select a nonexistent value:

$("<div />").append($('[name=localeID]:first').clone().val(-1)).html();

Or you can find selected option and remove selected attribute:

$("<div />").append($('[name=localeID]:first').clone()
                    .find(':selected').removeAttr('selected').end()).html();

but this is a little clumsy.

you can remove the selected attribute with this code.

$('[name=localeID] option:selected').removeAttr('selected');