Cela me rend fou! Pourquoi Cant ne peut pas implémenter des méthodes ou des exemples clairs sur sa page comment faire de la manipulation CRUD simple sur Select2 :)
j'ai un select2 qui obtient des données d'un appel ajax.
<input id="valueg" type="hidden" style="width: 300px;" data-placeholder="Select a Conference" />
$("#valueg").select2({
data: conferences,
allowClear: true,
initSelection: function (element, callback) {
var data = { id: element.val(), text: element.val() };
callback(data);
}
}).on("change", function (e) {
// show data in separate div when item is selected
});
Quelqu'un peut-il fournir une méthode claire sur la manière de supprimer et d’ajouter un élément de Select2?
Par exemple:
J'ajoute un élément via un appel ajax à db et je veux juste ajouter une option à Select2 et le définir comme sélectionné.
Je supprime un élément via ajax to db, et je souhaite supprimer une option de Select2 sans qu'aucune option ne soit sélectionnée.
De votre exemple, je peux voir que vous avez attaché le plugin Select2 à l’élément caché. De plus, vous utilisez l'appel Ajax pour renseigner les résultats. Dans ce cas, si vous devez ajouter une nouvelle option à la liste, vous appelez simplement:
$('#valueg').select2('val', 'YOUR_VALUE');
Dans le cas d'utilisation de select element en tant que conteneur, le seul moyen que j'ai trouvé est de réinitialiser le plugin avec de nouvelles options ... Quelque chose comme ceci:
var el = $('select[name="type"]', '#details-form');
var temp = el.select2('val'); // save current value
temp.Push(NEW_VALUE); // append new one
var newOptions = '<option value="1">1</option><option value="2">2</option>';
el.select2('destroy').html(newOptions ).select2().select2('val', temp);
J'ai eu le même problème. Voici comment je l'ai résolu
Cela n'a rien à voir avec select2, manipuler le lui-même semble fonctionner pour moi
$("#lstService").empty();
for(var i=0;i<data.length;i++){
$("#lstService").append('<option value="'+data[i].service_id+'">'+data[i].service_name+'</option>');
}
Je l'ai fait comme ça:
var $select2 = $('#valueg').select2(); // getting the select2
var item = 'xyz'; // item to be added
$select2.val(function(i, val) { // val can take function as parameter
val = val || []; // if value is null init val as an array
val.Push(item); // add the new item
return val;
}).trigger("change"); //refresh
J'espère que cela pourra aider
C'est trop tard ... mais c'est ma solution pour les personnes qui ont encore ce problème:
html = "";
jQuery("#select_2 option").each(function()
{
html += '<option value="'+jQuery(this).attr("value")+'">'+jQuery(this).text()+'</option>';
});
html += '<option value="NEWVALUE">NEW OPTION</option>';
jQuery("#select_2").html(html);
Dans mon cas, l'élément clé à ajouter après avoir manipulé le select sous-jacent est:
$selectlist.trigger("change");
// $ selectlist est l'élément select sous-jacent.
Select2 fonctionne autour de l'événement change sur une sélection. L'appel de "modification" met à jour l'option affichée dans la sélection 2.