JQuery Clone: Updated values not reflected on the cloned DOM

Question

I'm having a problem regarding to the values of the object that I cloned. I cloned the div container and did some modification (fetching data from database to set the value for example) after that, clone the object. The cloned object persisted its selected value not the updated value.

Below is the sample code: jsFiddle

<div id="container">
<select id="ddl">
    <option selected>Value1</option>
    <option>Value2</option>
    <option>Value3</option>
    <option>Value4</option>
</select>

</div>
<div id="clonecontainer">
</div>

    $(document).ready(function(){
    var div = $('#container');
    var msg = $(div).find('#ddl');
    $(msg).val("Value3").prop('selected', 'selected');
    alert($(div).find('#ddl').val());

    var tr = $(div).clone(true, true);
    alert($(tr).find('#ddl').val());
    $(tr).appendTo("#clonecontainer");

    });

score 0 · Answer 1 · answered May 19 '15 at 10:02

0

Use class instead of id (for further operations) and set the current value to cloned element -

$(document).ready(function(){
    var div = $('#container');
    var msg = $(div).find('.ddl');
    $(msg).val("Value3").prop('selected', 'selected');

    var tr = $(div).clone(true, true).find('select').val($(div).find('.ddl').val());
    $(tr).appendTo("#clonecontainer");

});

answered May 19 '15 at 10:02

Sougata Bose

31,517
8
49
87

1

**[Demo here](https://jsfiddle.net/Guruprasad_Rao/og2vu5a4/8/)** – Guruprasad J Rao May 19 '15 at 10:04
Hi. Thanks for your answer. This will only works if we only have 1 control? – Chris May 19 '15 at 10:09
Then how many you want and do you want this? – Sougata Bose May 19 '15 at 10:10
Hi, actually I have 5-7 controls need to be cloned in one container of course. – Chris May 19 '15 at 10:16
Then do it that way. – Sougata Bose May 19 '15 at 10:22

JQuery Clone: Updated values not reflected on the cloned DOM

1 Answers1