Clonado Select2 não está respondendo

Eu estou tentando clonar uma linha que contém a ferramenta select2, quando eu clonei essa linha usando jQuery o select2 clonado não está respondendo.Na imagem dada abaixo primeiro select2 que é original está funcionando bem mas 2 e 3 select2 que são clonados não respondendo

fragment de código:

Antes de clonar a linha, você precisa desativar Select2 no elemento select chamando seu método destroy :

destruir

Reverte as alterações feitas no DOM por Select2. Qualquer seleção feita via Select2 será preservada.

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

Depois de clonar a linha e inserir seu clone no DOM, você precisa ativar select2 em ambos os elementos selecionados (o original e o novo clonado).

Aqui está um JSFiddle que mostra como isso pode ser feito: http://jsfiddle.net/ZzgTG/

O código de Fiddle

HTML

 

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

você tem que destruir select2 primeiro antes de clonar, mas .select2 (‘destroy’) não funciona. Usa isto:

 $myClone = $("section.origen").clone(); $myClone.find("span").remove(); $myClone.find("select").select2(); $("div").append($myClone); 

Eu resolvi isso criando uma function clone diferente:

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

você tem que destruir todos os select2 antes de clonar, por exemplo:

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

Eu resolvi esse problema com isso:
Chame o método destroy antes de adicionar uma nova linha

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

Depois de chamar a function select2 jQuery:

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

espero que ajude 😉

Na verdade, criei uma conta para responder a isso, pois demorei um pouco para que funcionasse.

Isso não está funcionando quando usado antes da clonagem: $('.selectpicker').select2('destroy')

Mas isso funciona no meu caso:

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

Basta remover todos os atributos adicionais que select2 adiciona.

Editar # 1

Ok, então parece que você também tem que remover o ID do elemento que está sendo clonado, pois select2 tenta adicionar seu próprio ID único quando nenhum é encontrado no select, mas quando você seleciona, ele está ficando confuso e selet2 é anexado somente no último. elemento com o mesmo ID.

Eu enfrentei o mesmo problema, ao tentar adicionar uma linha a uma tabela dinamicamente. (a linha contém mais de uma instância select2).

Eu resolvi assim:

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

O truque é que você precisa destruir todas as instâncias de .select2 separadamente e antes de clonar a linha. E depois da clonagem, reinicialize o .select2. Espero que isso funcione para os outros também.

Como usar o código jorar91.

 var $clone = $("#multiple_objects_with_select2").cloneSelect2(); $($clone ).find('select').select2({ width:'100%' }); $("#some_place").append($clone); 

No div pai, não aplique select2 nele. Primeiro, clone-o e salve-o em uma variável e aplique select2. Mais tarde, aplique select2 no original (como o original sem select2 já está salvo em uma variável) e, em seguida, aplique no select recém-criado. Eu tentei desse jeito e está funcionando

Eu ofereço para fazer isso, é o meu exemplo simples:

 function copy_row(id) { var new_row = $("#"+id+" tbody tr:first").clone(); $("#"+id+" tbody").append(''+new_row.html()+''); $("#"+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:'Ymd H:i', }); }