web-dev-qa-db-fra.com

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

J'ai une sélection multiple comme celle-ci:

<select multiple="multiple" class="myList">
        <option value="1" selected="selected">Apple</option>
        <option value="2" selected="selected">Mango</option>
        <option value="3" selected="selected">Orange</option>
</select>

Maintenant, en dehors de ces 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 <select> élément.

Mais quand j'utilise <input type="hidden"> alors où dois-je conserver les options présélectionnées? Comment les afficher lorsque la case select2 apparaît?

javascriptjqueryjquery-select2
14
JavaTechnical

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);
13
Manjeet Singh Chauhan

Vous pouvez utiliser la fonction "données" 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 une autre façon de définir les valeurs initiales, mais vous spécifiez uniquement les identifiants avec cette fonction. Dans ce cas, vous devrez fournir une fonction "initSelection" qui construit les objets à 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.

Quant à l'option "id", je ne pense pas que vous en ayez besoin. Il suffit de mettre de la logique dans la fonction ajax "results" pour qu'elle crée un tableau d'objets qui ont les propriétés id et text appropriées, ou que le serveur renvoie des objets avec ces propriétés.

démo jsfiddle

8
John S

Pour prédéfinir des valeurs, utilisez la propriété 'val' pour prédéfinir 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 "id" correct du serveur sans avoir besoin de la fonction id.

5
Ferry Kranenburg

Vous pouvez également charger les valeurs dans le HTML:

<select class="selector" multiple="multiple" >
    <option selected value="1">Apple</option>
    <option selected value="2">Mango</option>
    <option selected value="3">Orange</option>
</select>

Et connectez-y select2:

$(".selector").select2({
    width: 'inherit',
    minimumInputLength: 2,
    minimumResultsForSearch: 10,
    placeholder: "Search for fruits",
    ajax: {
        delay: 1000,
        url: "/bla_foo",
        dataType: 'json',
        type: "GET",
    }
})

et select2 pré-remplira le formulaire.

1
Pinguin Pinguin
$("#select2").select2('data', {id: '3', text: 'myText'});
0
Manoj