Définir par programmation de la valeur d'un Select2 ajax

Note Ceci a été testé avec la version 4+

j'ai finalement pu faire des progrès après avoir trouvé cette discussion: https://groups.google.com/forum/#!topic/select2 / TOh3T0yqYr4

Le Dernier commentaire note une méthode que j'ai pu utiliser avec succès.

exemple:

$("#selectelement").select2("trigger", "select", {
    data: { id: "5" }
});

cela semble être assez d'informations pour qu'il corresponde aux données ajax, et définir la valeur correctement. Cela a énormément aidé avec les adaptateurs de données personnalisés.

pour définir les valeurs initiales, vous devez ajouter la balise options nécessaires à l'élément select avec jQuery, puis définir ces options telles que sélectionnées avec la méthode val de select2 et finalement déclencher l'événement 'change' de select2.

1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);

le troisième argument booléen dit à select2 de déclencher l'événement de changement.

pour plus d'informations, voir https://github.com/select2/select2/issues/3057

soyez prudent, il y a une erreur dans le commentaire" validé".

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

le bon chemin est

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

utiliser text au lieu de label

d'après leurs exemples https://select2.github.io/examples.html

accès aux programmes:

var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });

si vous retirez le .trigger('change') de votre violon il se connecte Object {id: 1, label: "NEW VALUE"} (besoin de cliquer deux fois puisque la connexion est avant le changement de valeur). Est-ce que vous cherchez?

si vous utilisez select2 avec plusieurs options, utilisez cette construction:

$(element).select2("data", $(element).select2("data").concat(newObject), true);

jQuery select2 multiple set concaténation

c'est ici:

$("#tag").select2('data', { id:8, title: "Hello!"});

avec Select2 version 4+, il n'y a en fait rien de spécial à faire. JQuery Standard avec un déclencheur d'événement "change" à la fin fonctionnera.

var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || [];    // If you want to merge with existing

$(items).each(function () {
  if(!$select.find("option[value='" + this.id + "']").length) {
    $select.append(new Option(this.text, this.id, true, true));
  }
  data.push(this.id);
});

$select.val(data).trigger('change'); // Standard event notifies select2

il y a un exemple de base dans la documentation de Select2: https://select2.org/programmatic-control/add-select-clear-items

POUR LA VERSION 3.5.3

    $(".select2").select2('data',{id:taskid,text:taskname}).trigger('change');

Basé sur John S " réponse . Juste ce qui précède fonctionnera cependant seulement si pendant l'initialisation de la select2 l'option initSelection n'est pas initialisée.

$(".select2").select2({
      //some setup
})

tout ce que vous avez à faire est de définir la valeur puis d'exécuter: $ ('#myselect').select2 (); ou $ ('select').select2 (); . Et tout est mis à jour très bien.