Comment présélectionner des valeurs dans select2 multi select?

Je vais avoir une sélection multiple comme ceci:

 Apple Mango Orange

Maintenant, mis à part les options qui doivent être sélectionnées dans la zone de sélection, je voulais une fonctionnalité ajax supplémentaire qui donnerait des valeurs à partir d’une source distante.

Voici mon code pour select2

 $(function(){ $(".myList").each(function(){ $(this).select2({ placeholder: "Search for fruits", minimumInputLength: 2, multiple: true, id: function(e) { return e.id+":"+e.name; }, ajax: { url: "https://localhost:8443/fruit_search", dataType: 'json', data: function(term, page) { return { q: term }; }, results: function(data, page) { var frts=[]; $.each(data,function(idx,Frt){ frts[frts.length]=Frt; }); return { results: frts }; } }, initSelection: function(element, callback) { var data = []; }, formatResult: formatResult, formatSelection: formatSelection }); }); });

Mais je reçois l’erreur:

Erreur: L’option ‘id’ n’est pas autorisée pour Select2 lorsqu’elle est attachée à un élément .

Mais lorsque j’utilise où dois-je conserver les options présélectionnées? Comment puis-je les afficher lorsque la boîte de sélection 2 apparaît?

Si vous n’avez que des valeurs, vous pouvez utiliser 'val' pour obtenir des valeurs présélectionnées comme celle-ci.

 var PRESELECTED_FRUITS = [ '1','2','3']; $('.myList').select2({}).select2('val', PRESELECTED_FRUITS);

Vous pouvez utiliser la fonction “data” pour définir les valeurs initiales:

 var PRESELECTED_FRUITS = [ { id: '1', text: 'Apple' }, { id: '2', text: 'Mango' }, { id: '3', text: 'Orange' } ]; $('.myList').select2('data', PRESELECTED_FRUITS)

Remarque: La fonction “val” est un autre moyen de définir les valeurs initiales, mais vous ne spécifiez que les identifiants avec cette fonction. Dans ce cas, vous devrez fournir une fonction “initSelection” qui construit les objects à partir des identifiants.

Notez également que l’option “id” n’est pas la seule option qui vous oblige à utiliser une entrée masquée. Vous ne pouvez pas non plus utiliser l’option “ajax” avec un élément select.

En ce qui concerne l’option “id”, je ne pense pas que vous en ayez besoin. Il suffit de mettre la logique dans la fonction ajax “results” pour créer un tableau d’objects possédant les propriétés id et text appropriées ou permettre au serveur de renvoyer des objects avec ces propriétés.

jsfiddle demo

Pour prérégler des valeurs, utilisez la propriété ‘val’ pour prérégler les valeurs sélectionnées.

 $(this).select2({ val: ["1","2","3"] }

Mais pourquoi ne pas supprimer la fonction ‘id’? Si possible, vous pouvez renvoyer le «bon» identifiant du serveur sans avoir besoin de la fonction id.