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

j'ai une entrée Auto-complète Select2 (construite via SonataAdmin), mais je ne peux pas pour la vie de moi comprendre comment programmatically réglé à une paire clé/valeur connue.

il y a un violon JS ici qui montre à peu près ce que j'ai. Ce que je veux savoir est quelle fonction je peux attacher au bouton de sorte que

  • le champ Select2 affiche le texte "nouvelle valeur" pour l'utilisateur, et
  • le Select2 champ de soumettre une valeur de "1" lorsque le formulaire est envoyé au serveur

j'ai essayé toutes sortes de combinaisons de jQuery et Select2 data et val méthodes, appelé contre diverses entrées sur la page, mais rien ne semble fonctionner... sûrement, il y a une certaine façon de le faire?

-- Edit --

la réponse acceptée ci-dessous est très utile, aide à faire la lumière sur la bonne façon d'initialiser la sélection et explique à quoi sert initSelection.

cela dit, il semble que ma plus grande erreur ici ait été la façon dont j'ai essayé de déclencher le changement.

j'utilisais:

$(element).select2('data', newObject).trigger('change');

mais il en résulte un objet vide add à l'intérieur de l'événement de changement de select2.

si, à la place, vous utilisez:

$(element).select2('data', newObject, true);

puis le code fonctionne comme il se doit, avec le newObject disponible dans l'événement de changement de select2 et les valeurs étant réglées correctement.

j'espère que cette information supplémentaire aide quelqu'un d'autre!

23
demandé sur caponica 2014-08-20 05:28:37

11 réponses

Note: la Question et cette réponse sont pour Select2 v3. Select2 v4 a une API très différente de v3.

je pense que le problème est la fonction initSelection . Utilisez-vous cette fonction pour définir la valeur initiale? Je sais que la documentation de Select2 donne l'impression que C'est le but, mais elle dit aussi "essentiellement ceci est une fonction de mappage d'objet id ->", et ce n'est pas comme ça que vous l'avez implémenté.

Pour une raison quelconque, l'appel à .trigger('change') provoque l'appel de la fonction initSelection , qui change la valeur sélectionnée de nouveau en"ENABLED_FROM_JS".

essayez de vous débarrasser de la fonction initSelection et définissez la valeur initiale en utilisant:

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

jsfiddle

Note: l'OP a fourni les options formatResult et formatSelection . Comme fourni, ces fonctions de rappel s'attendent à la les éléments doivent avoir une propriété" label", plutôt qu'une propriété" text". pour la plupart des utilisateurs, il devrait être:

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

plus d'informations sur la fonction initSelection :

si vous faites une recherche dans la" documentation 1519410920 "sélectionnez 1519300920" pour "sélection d'entrée", vous verrez qu'elle est utilisée lorsque l'élément a une valeur initiale et que la fonction .val() de l'élément est appelée. C'est parce que ces valeurs se composent seulement d'un id et Select2 a besoin de l'objet de données entier (en partie pour qu'il puisse afficher l'étiquette correcte).

si la commande Select2 affichait une liste statique, la fonction initSelection serait facile à écrire (et il semble que Select2 pourrait vous la fournir). Dans ce cas, la fonction initSelection n'aurait qu'à chercher le id dans la liste de données et retourner l'objet de données correspondant. (Je dis "retour" ici, mais il ne renvoie pas vraiment l'objet de données; il le transmet à une fonction de rappel.)

dans votre cas, vous n'avez probablement pas besoin de fournir la fonction initSelection puisque votre élément n'a pas de valeur initiale (dans le html) et vous n'allez pas appeler sa méthode .val() . Il suffit de continuer à utiliser la méthode .select2('data', ...) pour définir les valeurs de façon programmatique.

si vous deviez fournir une fonction initSelection pour un autocomplete (qui utilise ajax), il serait probablement besoin de faire un appel ajax pour construire l'objet de données.

25
répondu John S 2016-07-21 05:47:51

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.

30
répondu Mark 2016-07-28 14:54:04

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

10
répondu nespapu 2015-08-28 08:31:57

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

6
répondu lucbonnin 2015-08-24 07:29:47

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"); });
3
répondu Valentin Petkov 2015-12-09 16:17:10

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?

1
répondu vesse 2014-08-20 02:17:47

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

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

1
répondu McAndrews 2015-08-06 13:50:09

c'est ici:

$("#tag").select2('data', { id:8, title: "Hello!"});
1
répondu francisco garcia 2016-10-28 20:53:38

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

1
répondu Ryan 2018-03-05 06:11:55

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
})
0
répondu Pastlifeuknow 2017-05-23 11:54:40

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.

0
répondu Del Eraser 2017-03-05 16:39:03