web-dev-qa-db-fra.com

Select2 Dropdown Dynamically Ajouter, supprimer et actualiser des éléments de

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.

javascriptjquery-select2
17
dotsa

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

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

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

2
ashraf aaref

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);
0
Eloy Fernández Franco

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.

0
Forer