1

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");

    });
Chris
  • 599
  • 7
  • 23

1 Answers1

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");

});
Sougata Bose
  • 31,517
  • 8
  • 49
  • 87