Startwerte beim Laden mit Select2 mit Ajax einstellen

Vielleicht funktioniert das für Sie !! Das funktioniert für mich ...

initSelection: function (element, callback) {

            callback({ id: 1, text: 'Text' });
}

Überprüfen Sie sehr gut, dass der Code richtig geschrieben ist, mein Problem war in der initSelection, ich hatte initselection

Auf neue Version aktualisiert:

Versuchen Sie diese Lösung von hier http://jsfiddle.net/EE9RG/430/

$('#sel2').select2({
multiple:true,
ajax:{}}).select2({"data": 
     [{"id":"2127","text":"Henry Ford"},{"id":"2199","text":"Tom Phillips"}]});

Ravi, für 4.0.1-rc.1:

1. Fügen Sie alle <option>-Elemente in <select> hinzu.
2. aufruf von $element.val(yourarray).trigger("change"); nach select2 init-Funktion.

HTML:

<select name="Tags" id="Tags" class="form-control input-lg select2" multiple="multiple">
       <option value="1">tag 1</option>
       <option value="2">tag 2</option>
       <option value="3">tag 3</option>
 </select>

JS:

var $tagsControl = $("#Tags").select2({
        ajax: {
            url: '/Tags/Search',
            dataType: 'json',
            delay: 250,
            results: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.text,
                            id: item.id
                        }
                    })
                };
            },
            cache: false
        },
        minimumInputLength: 2,
        maximumSelectionLength: 6
    });

    var data = [];
    var tags = $("#Tags option").each(function () {
        data.Push($(this).val());
    });
    $tagsControl.val(data).trigger("change");

Dieses Problem wurde gemeldet, aber es wurde immer noch geöffnet . https://github.com/select2/select2/issues/3116#issuecomment-146568753

Ein sehr seltsamer Weg zur Weitergabe von Daten. Ich ziehe es vor, einen JSON-String/ein Objekt vom Server zu beziehen und dann Werte und Sachen zuzuweisen.

Wenn Sie dies var elementText = $(element).attr('data-initvalue'); tun, erhalten Sie diesen [{"id":"IN","name":"India"}]. Dieses Ergebnis müssen Sie wie oben vorgeschlagen parse, damit Sie die tatsächlichen Werte für die ID ("IN") und den Namen ("India") erhalten können. Jetzt gibt es zwei Szenarien: Mehrfachauswahl & Einzelwertauswahl2.

Einzelwerte:

$(element).select2({
    initSelection : function (element, callback) {
        var data = {id: "IN", text: "INDIA"};
        callback(data);
    }//Then the rest of your configurations (e.g.: ajax, allowClear, etc.)
});

Mehrfachauswahl

$("#tags").select2({
    initSelection : function (element, callback) {
        var countryId = "IN"; //Your values that somehow you parsed them
        var countryText = "INDIA";

        var data = [];//Array

        data.Push({id: countryId, text: countryText});//Push values to data array


        callback(data); //Fill'em
    }
});

JETZT HIER IST DER TRICK! Wie von belov91 vorgeschlagen, MÜSSEN Sie dies ...

$(element).select2("val", []);

Auch wenn es sich um ein ein- oder mehrwertiges Select2 handelt. Denken Sie jedoch daran, dass Sie die Select2-Ajax-Funktion nicht einem <select>-Tag zuweisen können, es muss ein <input> sein.

Hoffe das hat dir (oder jemandem) geholfen.

Tschüss.

Ich habe hinzugefügt

initSelection: function (element, callback) {

      callback({ id: 1, text: 'Text' });
}

Aber auch

.select2('val', []);

am Ende.

Das hat mein Problem gelöst.

var elem = $("#container").find("[name=elemMutliOption]");
for (var i = 0; i < arrDynamicList.length; i++)
{
   elem.find("option[value=" + arrDynamicList[i] + "]").attr("selected", "selected");
}
elem.select2().trigger("change");

Dies wird für Personen funktionieren, die dieselbe Ansicht für mehrere Abschnitte auf der Seite verwenden. Dies wird auf dieselbe Weise zum automatischen Festlegen von Standardeinstellungen auf Ihrer Seite OR besser als auf einer EDIT-Seite funktionieren.

Das "FOR" durchläuft das Array, in dem bereits vorhandene Optionen im DOM geladen sind.

Ändern Sie den Wert, nachdem die Seite geladen wurde

$('#data').val('').change();

sie können Folgendes verwenden 

$(element).select2("data",[ { id: result.id, text: "جابر احمد الصباح" },
    { id: 2, text: "خليل محمد خليل" }]);

Spät :( aber ich denke, das wird dein Problem lösen.

 $("#controlId").val(SampleData [0].id).trigger("change");

Nach der Datenbindung

 $("#controlId").select2({
        placeholder:"Select somthing",
        data: SampleData // data from ajax controll
    });
    $("#controlId").val(SampleData[0].id).trigger("change");

In meinem Fall war das Problem das Rendern der Ausgabe. Also habe ich den Standardtext verwendet, falls die Ajax-Daten noch nicht vorhanden sind.

  templateSelection: function(data) {
    return data.name || data.element.innerText;
  }