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>
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();
});
});
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);
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();
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;
};
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.
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 ;)
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.
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> <a onclick="remove_column(this, 'paste_place');"><i style="font-size: 20px; color: red;" class="icon-minus-circle2"></i></a></td>
</tr>
</tbody>
</table>
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',
});
}
Comment utiliser le code jorar91.
var $clone = $("#multiple_objects_with_select2").cloneSelect2();
$($clone ).find('select').select2({
width:'100%'
});
$("#some_place").append($clone);
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