Charger les valeurs dans select2 multiselect

Question

J'utilise select2 à la place du champ de recherche.

Ici j'utilise pour charger les pays valeurs comme cette

$("#countries").select2({ 
    multiple: true, 
    tags:["India", "Japan", "Australia","Singapore"], 
    tokenSeparators: [","] 
}); 

Lorsque je presse le bouton Enregistrer, ils sont correctement soumis au serveur, maintenant ici la question est quand je veux modifier le champ pays après avoir enregistré sur le serveur, comment je peux charger les valeurs enregistrées dans le champ de pays.

Voici comment je récupérer des données à partir du serveur

$.getJSON('/dataprovider?data=fetchCountriesForm', function(opts) { 

    //the opts here contains the json values of the countries. 

    //what code should be written here to load the values in $('#countries).select2(); 

    //user can add some more countries or can remove the previously added countries. 

} 

Answer 1

I il suffit d'utiliser ce lien http://ivaynberg.github.io/select2/#event_ext_change et d'utiliser la fonction de déclenchement pour charger les valeurs

$.getJSON('/dataprovider?data=fetchCountriesForm', function(opts) { 
     parent.parent.parent.showLoader(); 
     if (opts) { 
      $("#countries").val(opts).trigger("change"); 
     } 

Cette astuce charge la valeur dans la zone de sélection.

Answer 2

S'il vous plaît un coup d'oeil une documentation vertu de l'article Loading Remote Data.

Vous trouverez et exemple comme:

$("#e6").select2({ 
    placeholder: "Search for a movie", 
    minimumInputLength: 1, 
    ajax: { 
      // instead of writing the function to execute the request we use Select2's convenient helper 
      url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json" 
      // Other stuffs 
      } 
}); 

Aussi, vous pouvez faire comme ceci:

$.getJSON('/dataprovider?data=fetchCountriesForm', function(opts){ 
    $("#countries").select2({ 
     data: opts 
    }); 
}) 

Vos JSON données doivent être au format comme ci-dessous:

[{id:0,text:'enhancement'}, 
{id:1,text:'bug'}, 
{id:2,text:'duplicate'}, 
{id:3,text:'invalid'}, 
{id:4,text:'wontfix'} 
]