jquery clone and select/select2 selected values on jquery cloned elements getting lost

When using jQuery's clone() method to clone elements that contain <select> or <select2> elements, the selected values may appear to be lost because the clone operation does not retain the selected state. This is because the clone() method performs a shallow copy of elements, which means it copies the elements' properties but not their values or states.

To preserve the selected values of <select> or <select2> elements when cloning, you need to manually set the selected option in the cloned elements. Here's how you can achieve this:

1. For Basic <select> Elements:

Assuming you have an HTML structure like this:

htmlCopy code
<div id="container">
  <select class="my-select">
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
<button id="cloneButton">Clone</button>

You can use the following jQuery code to clone the elements and preserve the selected value:

javascriptCopy code
$(document).ready(function() {
  $('#cloneButton').click(function() {
    var originalSelect = $('#container .my-select');
    var clonedSelect = originalSelect.clone();

    // Get the selected value of the original select
    var selectedValue = originalSelect.val();

    // Update the cloned select to set the selected value
    clonedSelect.val(selectedValue);

    $('#container').append(clonedSelect);
  });
});

By explicitly setting the selected value on the cloned <select> element, you ensure that the selected state is preserved when the element is cloned and appended to the container.

2. For <select2> Elements:

If you are using the Select2 library for enhanced <select> elements, you'll need to trigger the change event on the cloned Select2 element after setting the selected value. This is because Select2 updates its internal state when the change event is triggered.

Here's how you can clone a Select2 element while preserving the selected value:

javascriptCopy code
$(document).ready(function() {
  $('#cloneButton').click(function() {
    var originalSelect2 = $('#container .my-select2');
    var clonedSelect2 = originalSelect2.clone();

    // Get the selected value of the original select2
    var selectedValue = originalSelect2.val();

    // Update the cloned select2 to set the selected value
    clonedSelect2.val(selectedValue);

    $('#container').append(clonedSelect2);

    // Trigger the change event on the cloned select2 to update its internal state
    clonedSelect2.trigger('change');
  });
});

By triggering the change event on the cloned Select2 element, you ensure that the selected value is correctly reflected in the Select2 dropdown.

With these adjustments, your cloned <select> or <select2> elements should retain their selected values when cloned and appended to the container.