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

Remarque: La Question et cette Réponse sont pour Select2 v3. Select2 v4 est très différent de l'API que la v3.

Je pense que le problème est le initSelection fonction. Êtes-vous à l'aide de cette fonction pour définir la valeur initiale? Je sais que le Select2 documentation donne l'impression que c'est le but, mais il dit aussi "c'est un id->objet en fonction de mappage," et qui n'est pas la façon dont vous l'avez mise en place.

Pour une raison que l'appel à .trigger('change') causes de la initSelection la fonction appelée, ce qui change la valeur sélectionnée pour en revenir à "ENABLED_FROM_JS".

Essayer de se débarrasser de la initSelection fonction et, à la place de la valeur initiale à l'aide de:

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

jsfiddle

Remarque: L'OP a fourni les formatResult et formatSelection options. En tant que tels, ces fonctions de rappel attendre les éléments à avoir un "label" de la propriété, plutôt que d'un "texte" de la propriété. Pour la plupart des utilisateurs, il convient de:

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

Plus d'infos sur le initSelection fonction:

Si vous rechercher à travers le Select2 documentation pour "initSelection", vous verrez qu'il est utilisé lorsque l'élément a une valeur initiale et lorsque l'élément de .val() fonction est appelée. C'est parce que ces valeurs se composent seulement d'un id et Select2 besoins de l'ensemble de l'objet de données (en partie il possible d'afficher l'étiquette correcte).

Si le Select2 de contrôle a été l'affichage d'une liste statique, la initSelection fonction serait facile d'écrire (et il semble que Select2 pourrait fournir de l'énergie pour vous). Dans ce cas, le initSelection fonction aurait juste à regarder la id dans la liste de données et de retourner les données correspondantes de l'objet. (Je dis "retour" ici, mais il n'a pas vraiment de retour à l'objet de données; il passe à une fonction de rappel.)

Dans votre cas, vous n'avez probablement pas besoin de fournir le initSelection fonction depuis votre élément n'a pas de valeur initiale (en html) et que vous ne vont pas à l'appel de son .val() méthode. Il suffit de garder à l'aide de la .select2('data', ...) méthode pour définir les valeurs par programmation.

Si vous étiez à fournir la initSelection fonction pour une saisie semi-automatique (qui utilise ajax), il serait probablement besoin de faire un appel ajax pour construire l'objet de données.

Pour définir les valeurs initiales que vous devez ajouter les options nécessaires balise pour le sélectionner l'élément avec jQuery, puis de définir ces options sélectionnées avec select2 du val méthode et enfin déclencher select2 du "changement" de l'événement.

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

Le troisième argument booléen indique select2 pour déclencher le changement de l'événement.

Pour plus d'info, voir https://github.com/select2/select2/issues/3057

de leurs exemples
https://select2.github.io/examples.html

Accès au programme:

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"); });

Lors de l'utilisation de select2 avec plusieurs option, utilisez cette construction:

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

jqueryselect2plusieurssetconcaténation

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

POUR LA VERSION 3.5.3

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

Basé sur John S' répondre . Juste le le ci-dessus ne fonctionne cependant que si lors de l'initialisation du select2 la initSelection option n'est pas initialisé.

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

Dans ma situation, j'ai été en mesure de rendre le présélectionnés option dans le code HTML côté serveur avec PHP.

Lors de mon chargement de la page, je connaissais déjà la valeur de l'option, donc mon <select name="team_search"></select> est devenu le suivant;

        <select name="team_search">
            <?php echo !empty($preselected_team) 
                    ? '<option selected="selected" value="'. $preselected_team->ID .'">' . $preselected_team->team_name . '</option>' 
                    : null ?>
        </select>';

Comme vous pouvez le voir, quand j'ai un $preselected_team de rendre disponible en option avec le selected attribut, value et ensemble d'étiquettes. Et, si je n'ai pas de valeur alors pas l'option est rendu.

Cette approche n'est pas toujours possible (et dans le cas de l'OP n'est pas mentionné), mais il ne viennent avec l'avantage supplémentaire d'être prêt au chargement de la page à l'avance de l'exécution de JavaScript.