jquery clone select doesnt keep value

Question

I am trying to clone a feildset then submit the contents of inputs and selects using serialize. It is working properly however select doesn't keep its value. I have tried several methods I have found but nothing seems to work. Here is how I am cloning and setting the current data.

How can I keep the value of select when cloning?

 $('body').append('<form id="form-to-submit" style="visibility:hidden;"></form>');  
var fieldsetName = $this.parents('.fieldsetwrapper');  
$('#form-to-submit').html($(fieldsetName).clone());  
var data = $('#form-to-submit').serialize();

Instead of cloning the entire fieldset, why not just serialize the data from the fieldset as a JS object when you want, and use that object to restore later (if that's what you're after). Or have I misunderstood the reason that you are cloning? — Phrogz
– Phrogz, Commented Jan 5, 2011 at 0:18
It's not a good idea to use .html() with .clone(). Clone gives elements, while .html() expects a string. Use the elements directly: $('#form-to-submit').empty().append($(fieldsetName).clone()); — David Tang
– David Tang, Commented Jan 5, 2011 at 0:39

Emmett · Accepted Answer · 2011-01-05 00:29:50Z

30

The option element maintains its current selectedness with the selected javascript property (not to be confused with the selected attribute, which corresponds to default selectedness).

Since jQuery's clone doesn't clone the current selectedness (http://bugs.jquery.com/ticket/1294) , you'll have to do it manually:

$('#form-to-submit').html($(fieldsetName).clone());
$('#form-to-submit select').val($('.fieldsetwrapper select').val());

answered Jan 5, 2011 at 0:29

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FLX Over a year ago

Hi, this is a really interesting solution, i didn't know that jQuery could find alone where to place the selected values. Is there a way to use this form an entire form and not only select elements ? Do you know a link that speak about this ? Thanks

Casey Falk Over a year ago

I found that this solution didn't work for multiple select menus if they had different direct parents. Instead I had to loop over "each" of the selects and match it with the corresponding select in the original with the ".eq" method. Just a quick note for anyone skimming through! :)

Peter Over a year ago

@Casey, I whish you had elaborated with a piece of code :) You'd still have to get the index of the original select right? Or is there another magic function that does this? :-)

Marcus Whybrow · Accepted Answer · 2011-01-05 00:24:35Z

3

You should be able to set the value of the new select element to the value of the old one:

$('#form-to-submit select').val($('.fieldsetwrapper select').val());

answered Jan 5, 2011 at 0:24

Marcus Whybrow

20.1k9 gold badges72 silver badges90 bronze badges

Comments

Kaido · Accepted Answer · 2013-03-20 08:42:15Z

0

In my case I was using

$('<form></form>').html($('.myDiv').clone())

and fixed the issue by adding another form to the markup

$('.myForm').serialize()

answered Mar 20, 2013 at 8:42

Kaido

4,08129 silver badges40 bronze badges

Collectives™ on Stack Overflow

jquery clone select doesnt keep value

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related