web-dev-qa-db-fra.com

Cloned Select2 ne répond pas

J'essaie de cloner une ligne contenant l'outil select2, lorsque je clone cette ligne à l'aide de jQuery, le select2 cloné ne répond pas.

 

extrait de code:

$(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>

javascriptjqueryjquery-select2
33
Abs

Avant de cloner la ligne, vous devez désactiver Select2 sur l'élément select en appelant sa méthode destroy:

détruire

Rétablit les modifications apportées au DOM par Select2. Toute sélection effectuée via Select2 sera préservée.

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

Après avoir cloné la ligne et inséré son clone dans le DOM, vous devez activer select2 sur les deux éléments sélectionnés (l'élément d'origine et le nouvel élément cloné).

Voici un JSFiddle qui montre comment cela peut être fait: http://jsfiddle.net/ZzgTG/

Code de violon

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

vous devez détruire select2 avant de cloner, mais .select2 ('destroy') ne fonctionne pas . Utilisez ceci:

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

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

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

vous devez d'abord détruire tous les select2 avant de cloner Par exemple: 

    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();
3
Abhinav bhardwaj

J'ai résolu ce problème en créant une fonction de clonage différente: 

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

J'ai en fait créé un compte pour répondre à cette question, car il m'a fallu un certain temps pour le faire fonctionner.

Cela ne fonctionne pas lorsqu'il est utilisé avant le clonage: $('.selectpicker').select2('destroy') </ code>

Mais cela fonctionne dans mon cas:

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

Supprimez simplement tous les attributs supplémentaires que select2 ajoute.

Modifier # 1

Ok, on dirait que vous devez également supprimer l’ID de l’élément qui est en cours de clonage, car select2 essaie d’ajouter son propre identifiant unique lorsque aucun élément n’est trouvé sur la sélection, mais lorsque vous avez sélectionné élément avec le même identifiant.

1
Volmarg Reiso

J'ai résolu ce problème avec:
Appelez la méthode destroy avant d’ajouter une nouvelle ligne

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

Après cela, appelez la fonction select2 jQuery:

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

j'espère que ça aide ;)

1
praguan

J'ai rencontré le même problème en essayant d'ajouter une ligne à une table de manière dynamique . (La ligne contient plus d'une instance de select2).

Je l'ai résolu de cette façon:

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

L'astuce consistait à détruire toutes les instances de .select2 séparément et avant de cloner la ligne. Après le clonage, réinitialisez le fichier .select2 .. J'espère que cela fonctionnera également pour les autres.

1
eheydenr

Et encore une 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>

0
Ramas Win

Je propose de faire cela, c'est mon exemple simple:

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

0
Ramas Win

Comment utiliser le code jorar91.

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

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

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

Dans la division parent, n'appliquez pas select2 dessus. Commencez par le cloner et enregistrez-le dans une variable, puis appliquez select2. Appliquez plus tard select2 sur l’image d’origine (l’image d’origine sans sélection2 étant déjà enregistrée dans une variable), puis appliquez-la sur la sélection nouvellement créée . J'ai essayé de cette façon et ça marche

0
AbdulBasit