Wie die Vorauswahl der Werte in select2 multi select?

Ich bin eine mehrfach-Auswahl-wie diese:

<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>

Nun, abgesehen von den Optionen, die kommen müssen, die Auswahl in der select box, ich wollte zusätzliche ajax-Funktionen, die geben würde, die Werte aus einer remote-Quelle.

Hier ist mein code für 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
                });
        });

});

Aber ich bin immer der Fehler:

Fehler: Option 'id' nicht erlaubt, Select2, wenn Sie an eine
<select> element.

Aber wenn ich <input type="hidden"> dann, wo sollte ich die vorab ausgewählten Optionen? Wie kann ich Ihnen zeigen, wenn das select2-box erscheint?

InformationsquelleAutor JavaTechnical | 2014-11-04

  1. 9

    Wenn du nur die Werte haben, dann können Sie 'val' um vorab ausgewählte Werte wie diese.

    var PRESELECTED_FRUITS = [ '1','2','3'];

$('.myList').select2({}).select2('val', PRESELECTED_FRUITS);
    Ich bin versucht, es zu benutzen aber es funktioniert nicht für mich, jsfiddle.net/wzshpjb1 Für mich nur ein Wert ist immer pre gefüllt, ich bin mit select2 v4.0.6
    Sie benötigen zum auslösen des change-Ereignisses. So etwas wie $('selector').select2(); $('selector').val(['1', '2', '3']).trigger('change');

    InformationsquelleAutor Manjeet Singh Chauhan

  2. 6

    Können Sie den "Daten" - Funktion, um die anfangs-Werte:

    var PRESELECTED_FRUITS = [
    { id: '1', text: 'Apple' },
    { id: '2', text: 'Mango' },
    { id: '3', text: 'Orange' }
];

$('.myList').select2('data', PRESELECTED_FRUITS)

    Hinweis: Die "val" - Funktion ist ein weiterer Weg, um die anfangs-Werte, aber geben Sie nur die ids mit dieser Funktion. In diesem Fall müssen Sie die Bereitstellung eines "initSelection" - Funktion, baut die Objekte aus der ids.

    Beachten Sie auch, dass die "id" - option ist nicht die einzige option, zwingt Sie zu verwenden, eine versteckte Eingabe. Sie können nicht mit dem "ajax" - option mit einem select-element.

    Als für die "id" - option, ich denke nicht, dass Sie es brauchen. Nur mit Logik in der ajax - "Ergebnisse" - Funktion, so baut Sie ein array von Objekten, die richtige id und text Eigenschaften, oder haben die server-Rückgabe Objekte mit diesen Eigenschaften.

    jsfiddle demo

    Nur eine Frage, was passiert, wenn 'PRESELECTED_FRUITS' leer ist? Es wird ein Fehler erzeugt? Oder wird select2 nicht mehr laden konnte?
    Ich habe herausgefunden, dass es nicht zu einem Fehler. sollte es noch laden regelmäßig.

    InformationsquelleAutor John S

  3. 4

    Preset-Werte verwenden Sie den 'val' - Eigenschaft zur Voreinstellung der ausgewählten Werte.

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

    Aber warum nicht entfernen Sie die 'id' - Funktion? Wenn möglich, kehren Sie könnten der richtige 'id' vom server, ohne die Notwendigkeit, die id-Funktion.

    InformationsquelleAutor Ferry Kranenburg

Schreibe einen Kommentar