Cloned Select2 is not responding

Question

I am trying to clone a row which contains select2 tool ,when i clone that row using jQuery the cloned select2 is not responding.In image given below first select2 which is o

Answer 1

I offer to make this, it is my simple example:

function copy_row(id) {
    var new_row = $("#"+id+" tbody tr:first").clone();
    $("#"+id+" tbody").append('<tr>'+new_row.html()+'</tr>');
    $("#"+id+" tbody tr:last input").val('');
    $("#"+id+" tbody tr:last select").val('');
    $("#"+id+" tbody tr:last input[type='checkbox']").prop('checked', false);

    // Initialize
    $(".select-remote-address:last, .select-remote-address2:last").select2({
        language: {
            inputTooShort: function() {
            return 'Įveskite...';
        }},
        ajax: {
            url: base_url+"index.php/orders/data/getAddress",
            type: 'POST',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {

                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;

                return {
                    results: data,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepo, // omitted for brevity, see the source of this page
        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
    });

    $(".select-remote-address:last").last().next().next().remove();
    $(".select-remote-address2:last").last().next().next().remove();

    // Datetimepicker
    jQuery('.date_1:last, .date_2:last').datetimepicker({
      i18n:{
        lt:{
         months:[
          'Sausis','Vasaris','Kovas','Balandis',
          'Gegužė','Birželis','Liepa','Rugpjūtis',
          'Rugsėjis','Spalis','Lapkritis','Gruodis',
         ],
         dayOfWeek:[
          "Pir", "An", "Tre", "Ket",
          "Pen", "Šeš", "Sek",
         ]
        }
       },
      format:'Y-m-d H:i',
    });
}

Answer 2

you have to destroy all select2 first before cloning for example:

    var div = $("#filterForm div"); 

    //find all select2 and destroy them   
   div.find(".select2").each(function(index)
    {
        if ($(this).data('select2')) {
            $(this).select2('destroy');
          } 
    });

    //Now clone you select2 div 
    $('.filterDiv:last').clone( true).insertAfter(".filterDiv:last"); 

    //we must have to re-initialize  select2 
    $('.select2').select2(); 

Answer 3

And one more solution:

function add_column(copy, paste) {
    $("." + copy + ":first").clone().appendTo("." + paste);
    $("." + paste + " tr:last input").val('');
    $("." + paste + " tr:last select").val('');
    // and etc...

		// Initialize
		$("." + paste + " tr:last select").select2({
		    language: {
		        inputTooShort: function() {
		        return 'Prašome įvesti bent vieną raidę paieškai';
		    }},
		    ajax: {
		        url: base_url+"fuel/Fuel/getWorkersSelect",
		        type: 'POST',
		        dataType: 'json',
		        delay: 250,
		        data: function (params) {
		            return {
		                q: params.term, // search term
		                page: params.page
		            };
		        },
		        processResults: function (data, params) {

		            // parse the results into the format expected by Select2
		            // since we are using custom formatting functions we do not need to
		            // alter the remote JSON data, except to indicate that infinite
		            // scrolling can be used
		            params.page = params.page || 1;

		            return {
		                results: data,
		                pagination: {
		                    more: (params.page * 30) < data.total_count
		                }
		            };
		        },
		        cache: true
		    },
		    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
		    minimumInputLength: 1,
		    templateResult: formatRepo, // omitted for brevity, see the source of this page
		    templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
		});

    $("." + paste + " tr:last select").last().next().next().remove();

}

function remove_column(e, paste) {
    var how = $("." + paste + " tr").length;
    if (how >= 2) {
        $(e).parent().parent().remove();
    } else {
        $("." + paste + " input").val('');
        $("." + paste + " select").val('');
        // and etc...
    }
}

<table class="table table-striped table-bordered">
													    <thead>
													        <tr>
													            <th width="15%">Mašina</th>
													            <th width="15%">Išduota</th>
													            <th width="15%">Grąžinta</th>
													            <th width="20%">Vairuotojas</th>
																			<th width="10%">Neaktualus</th>
																			<th width="15%">Perdavimo aktas</th>
													            <th width="10%">Veiksmai</th>
													        </tr>
													    </thead>
													    <tbody class="paste_place">
													        <tr class="copy_item">
													            <td><input type="text" name="masina[]" class="form-control" placeholder="Įveskite..." /></td>
													            <td><input type="text" name="isduota[]" class="form-control datepicker" placeholder="Įveskite..." /></td>
													            <td><input type="text" name="grazinta[]" class="form-control datepicker" placeholder="Įveskite..." /></td>
													            <td>
																					<select class="form-control select-remote-vairuotojai" name="vairuotojas[]">
																						<option value="">Pasirinkite iš sąrašo</option>
																					</select>
																			</td>
																			<td><input type="text" name="neaktualus[]" class="form-control" placeholder="Įveskite..." /></td>
																			<td>haha</td>
													            <td><a onclick="add_column('copy_item', 'paste_place');"><i style="font-size: 20px;" class="icon-plus-circle2"></i></a> &nbsp;<a onclick="remove_column(this, 'paste_place');"><i style="font-size: 20px; color: red;" class="icon-minus-circle2"></i></a></td>
													        </tr>
													    </tbody>
													</table>

Answer 4

you have to destroy select2 first before cloning, but .select2('destroy') not works. Use this:

$myClone = $("section.origen").clone();

$myClone.find("span").remove();
$myClone.find("select").select2();

$("div").append($myClone);

Answer 5

I solved this by creating a different clone function:

jQuery.fn.cloneSelect2 = function (withDataAndEvents, deepWithDataAndEvents) {
  var $oldSelects2 = this.is('select') ? this : this.find('select');
  $oldSelects2.select2('destroy');
  var $clonedEl = this.clone(withDataAndEvents, deepWithDataAndEvents);
  $oldSelects2.select2();
  $clonedEl.is('select') ? $clonedEl.select2() :
                            $clonedEl.find('select').select2();
  return $clonedEl;
};

Answer 6

What worked for me, to clone select input managed by select2 I did the following:
1. Destroy the select that is cloned
2. Clone with a true param
3. Remove from the clone attributes 'id' and 'data-select2-id'
4. Remove attribute 'data-select2-id' from every option in the clone
5. Re-initialize element that was cloned
6. Initialize cloned element resetting the value

Here is an example:

const origin = $('select').last(); // last in case there are more than one select
origin.select2('destroy');
const cloned = origin.clone(true);
cloned.removeAttr('data-select2-id').removeAttr('id');
cloned.find('option').removeAttr('data-select2-id');
origin.select2();
cloned.select2().val(null).trigger('change');