Cloned Select2 is not responding

问题

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 original is working fine but 2nd and 3rd select2 which are cloned not responding

code snippet:

$(document).ready(function() {
  var clonedRow = $('.parentRow').clone().html();
  var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
  $('#addRow').click(function() {
    $('#test').after(appendRow);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="parentRow" id="test">
  <td>
    <g:message code="educationDetails.educationLevel.label" default="Education Level" />
  </td>
  <td>
    <div style="float: left;">
      <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" />
    </div>
    <div>
      <a href="javascript:void(0)" id="addRow">
        <img alt="" title="Add Additional Education Level" src="/static/images
                                                                /top_submit_1.gif">
      </a>
    </div>
  </td>
</tr>

回答1:

Before you clone the row, you need to disable Select2 on the select element by calling its destroy method:

destroy

Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.

See http://ivaynberg.github.io/select2/index.html

After you clone the row and insert its clone in the DOM, you need to enable select2 on both select elements (the original one and the new cloned one).

Here's a JSFiddle that shows how it can be done: http://jsfiddle.net/ZzgTG/

Fiddle's code

HTML

<div id="contents">
    <select id="sel" data-placeholder="-Select education level-">
        <option></option>
        <option value="a">High School</option>
        <option value="b">Bachelor</option>
        <option value="c">Master's</option>
        <option value="c">Doctorate</option>
    </select>
</div>
<br>
<button id="add">add a dropdown</button>

CSS

#contents div.select2-container {
    margin: 10px;
    display: block;
    max-width: 60%;
}

jQuery

$(document).ready(function () {
    $("#contents").children("select").select2();
    $("#add").click(function () {
        $("#contents")
            .children("select")
            // call destroy to revert the changes made by Select2
            .select2("destroy")
            .end()
            .append(
                // clone the row and insert it in the DOM
                $("#contents")
                .children("select")
                .first()
                .clone()
        );
        // enable Select2 on the select elements
        $("#contents").children("select").select2();
    });
});

回答2:

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

回答3:

I faced the same problem, while trying to add a row to a table dynamically. (the row contains more than one select2 instance.)

I solved it in this way:

function addrow()
{
    var row = $("#table1 tr:last");

    row.find(".select2").each(function(index)
    {
        $(this).select2('destroy');
    }); 

    var newrow = row.clone();       

    $("#table1").append(newrow);

    $("select.select2").select2();
}

The trick was that you need to destroy all the instances of .select2 separately and before cloning the row. And then after cloning, re-initialize the .select2. I hope this will work for others as well.

回答4:

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

回答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;
};

回答6:

I've actually created account to answer this, since it took me a while to make it work.

This is not working when used before cloning: $('.selectpicker').select2('destroy')

But this works in my case:

$('.selectpicker').select2('destroy');
$('.selectpicker')
    .removeAttr('data-live-search')
    .removeAttr('data-select2-id')
    .removeAttr('aria-hidden')
    .removeAttr('tabindex');

Just remove all the additional attributes which select2 adds.

Edit #1

Ok so seems like You also got to remove ID from the element that is being cloned since select2 tries to add it's own unique id when none is found on the select, but when You do have select it's getting messy and selet2 attaches only on the last element with the same ID.

回答7:

I solved this problem with it:
Call destroy method before you add new row

 $(".className").select2("destroy");  //Destroy method , connect with class no ID (recomend)

After it call select2 jQuery function:

$(".className").select2({               
                placeholder: "Example",
                allowClear:true 
            });

hope it helps ;)

回答8:

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

回答9:

How to use jorar91 code.

var $clone = $("#multiple_objects_with_select2").cloneSelect2();

$($clone ).find('select').select2({
    width:'100%'
});

$("#some_place").append($clone);

回答10:

In the parent div don'nt apply select2 on it. First clone it and save it in a variable then apply select2. Later apply select2 on the origional(as the origional without select2 is alreay saved in a variable) and then apply on the newly created select. I tried this way and it is working

回答11:

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',
    });
}

回答12:

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>

来源：https://stackoverflow.com/questions/17175534/cloned-select2-is-not-responding

标签

javascript

jquery

jquery-select2