Anfangswerte beim Laden mit Select2 mit Ajax setzen

Lesezeit: 1 Minute

Benutzer-Avatar
Ravi

Ich habe select2-Steuerelemente mit Ajax eingerichtet (sowohl einzeln als auch mehrfach). Ich versuche, einige Werte beim Laden der Seite zu haben, kann dies jedoch nicht zum Laufen bringen. Mein Code für select2 ist unten angegeben:

function AjaxCombo(element, url, multival ){  // multival = true or false
  multival = multival || false;
  $(element).select2({
   minimumInputLength: 2,
   multiple: multival,
   separator: '|',
   ajax: {
     url: url,
     dataType: 'json',
     data: function (term, page) {
        var targetname = $(this).attr('name');
        var target = targetname.slice(targetname.indexOf("[")+1, targetname.indexOf("]"));
       return {
         targettype: "search",
         target: target,
         search: term
       };
     },
     results: function (data, page) {
       return { results: data };
     }
   }
 });
}
AjaxCombo(".ajaxselect", "includes/linkedcontrol.php", false);
AjaxCombo(".ajaxmultiselect", "includes/linkedcontrol.php", true);

Die Ajax-Kombination funktioniert gut, ich habe nur Probleme mit dem Laden der Anfangswerte. Ich habe diesen Code unten ausprobiert, konnte ihn aber nicht zum Laufen bringen:

initSelection : function (element, callback) {
    var elementText = $(element).attr('data-initvalue');
    callback(elementText);
}

Mein HTML von PHP wird wie folgt zurückgegeben:

<input name="header[country]" class="ajaxselect"  data-initvalue="[{"id":"IN","name":"India"}]" data-placeholder="Select Country" value="" />

Ich sehe, dass Werte aus PHP ausgefüllt werden, nur mein Jquery hat Probleme. Meine Werte in der Steuerung werden als angezeigt US | United States of America. Ich denke, ich habe die select2-Quelle bearbeitet, um dieses Format als Standard zu erhalten, ohne die Formatoption zu verwenden.

Kann mir bitte jemand helfen, die Standardwerte zu füllen? Danke im Voraus.

BEARBEITEN: Diese Frage bezieht sich auf Select2 Version <4.0. Diese Option wurde aus v4.0 entfernt und ist jetzt viel einfacher.

  • ansehen initSelection Möglichkeit

    – Arun P. Johny

    9. September 2013 um 13:45 Uhr

  • Ich hatte das ohne Erfolg versucht (bitte chk meine Beschreibung). Sehen Sie irgendwelche Probleme in meiner Vorgehensweise? kannst du mir helfen das zu klären?

    – Ravi

    9. September 2013 um 14:24 Uhr

  • Versuchen callback(JSON.parse(elementText));

    – Arun P. Johny

    9. September 2013 um 14:26 Uhr

  • Versuchen Sie zu ersetzen data-initvalue mit value und verwenden callback(JSON.parse(elementText)); in initSelection.

    – Benutzer1983983

    16. September 2013 um 13:23 Uhr

  • @ user1983983 Vielen Dank. Dein Vorschlag hat es geschafft. ich ersetzte var elementText = JSON.parse($(element).val()); anstatt den Rückruf zu ändern. Sie haben Ihren Vorschlag nicht als Antwort angegeben, daher kann ich Ihre Antwort nicht als akzeptiert markieren, aber ich habe sie positiv bewertet.

    – Ravi

    19. September 2013 um 3:02 Uhr


Benutzer-Avatar
JD-DC TECH

Vielleicht funktioniert das für dich!! Das funktioniert bei mir…

initSelection: function (element, callback) {

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

Überprüfen Sie sehr gut, ob der Code richtig geschrieben ist, mein Problem war in der initSelectionIch hatte initselection

  • initSelection ist Veraltet in Select2 4.0. Diese wurde durch die ersetzt current Methode auf der Datenadapter und ist nur verfügbar in den vollständigen Builds.

    – Paul T. Rawkeen

    13. August 2015 um 21:39 Uhr

  • @PaulT.Rawkeen, also wurde die Möglichkeit, eine Vorauswahl zu treffen, veraltet und verwirrender gemacht? Was? Ich versuche seit Stunden, mehrere Werte vorab auszuwählen, und habe das nie in den Dokumenten gesehen. Das ist absurd.

    – Der Puma

    15. Oktober 2015 um 23:42 Uhr


  • Hilft nicht, dass die Hälfte der Dokumentation “geschrieben” wird. Ehrlich gesagt, wenn Sie die Dokumentation noch nicht geschrieben haben, ist die Version noch nicht bereit für die Veröffentlichung.

    – Kapitän Hypertext

    22. Februar 2016 um 13:12 Uhr

Benutzer-Avatar
MKK

Aktualisiert zur neuen Version:

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

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

  • Gibt es eine Möglichkeit, eine hinzuzufügen if bei diesem Rückruf?

    – Michel Ayres

    7. Juli 2014 um 18:31 Uhr

  • Ich hatte ein Problem mit dem Plugin, fügt nur das erste Array hinzu, ignoriert den Rest

    – kscius

    7. Mai 2017 um 6:33 Uhr

  • Der AJAX-Aufruf findet nicht statt.

    – Mick

    29. März 2019 um 15:50 Uhr

Ravi, für 4.0.1-rc.1:

  1. Füge alle Hinzu <option> Elemente drin <select>.
  2. Anruf $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 ist noch offen.
https://github.com/select2/select2/issues/3116#issuecomment-146568753

  • HINWEIS: Ich versuche auch, es direkt ohne Add-in-Option zu pushen, aber es funktioniert nicht. Sie sollten sowohl Option als auch Push + Trigger hinzufügen

    – Sruit A.Suk

    17. Mai 2016 um 17:34 Uhr

  • Ich habe 3 Stunden lang gekämpft, bevor ich auf dieses süße Stück Code gestoßen bin. Vielen Dank!

    – Lawneet

    6. September 2019 um 19:41 Uhr

Eine sehr seltsame Art, Daten zu übergeben. Ich ziehe es vor, eine JSON-Zeichenfolge/ein Objekt vom Server zu erhalten und dann Werte und so weiter zuzuweisen.

Wie auch immer, wenn Sie dies tun var elementText = $(element).attr('data-initvalue'); du bekommst das [{"id":"IN","name":"India"}]. Dieses Ergebnis müssen Sie wie oben vorgeschlagen PARSEN, damit Sie die echten Werte für id (“IN”) und name (“India”) erhalten. Jetzt gibt es zwei Szenarien, Multi-Select & Single-Value Select2.

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 belov91 vorgeschlagen hat, MÜSSEN Sie dies sagen …

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

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

Hoffe das hat dir (oder jemandem) geholfen.

Wiedersehen.

Benutzer-Avatar
Benutzer1983983

Die Funktion, die Sie als angeben initSelection wird mit dem Anfangsbuchstaben aufgerufen value als argument. Also wenn value leer ist, wird die Funktion nicht aufgerufen.
Wenn Sie angeben value="[{"id":"IN","name":"India"}]" Anstatt von data-initvalue Die Funktion wird aufgerufen und die Auswahl kann initialisiert werden.

  • Ich habe ein Problem mit der Verwendung des Wertattributs, da dieses auch mit Leerzeichen übermittelt wird. Ich habe versucht, es leer zu lassen und dies dynamisch aus data-initvalue in den select2-Parametern zu ziehen, aber das funktioniert nicht. Gibt es eine Möglichkeit, ohne das Wertattribut zu definieren?

    – Ravi

    26. September 2013 um 17:53 Uhr

  • Was meinst du damit, dass es auch mit Leerzeichen gesendet wird? Wenn Sie den Wert löschen, wird der ursprünglich angegebene Wert übermittelt?

    – Benutzer1983983

    26. September 2013 um 18:38 Uhr

  • Meinst du initSelection?

    Benutzer657199

    24. August 2015 um 20:15 Uhr

  • es zeigt nur leer oder leer an

    – YXN

    30. Oktober 2017 um 10:52 Uhr

Benutzer-Avatar
Geliebte91

Ich habe hinzugefügt

initSelection: function (element, callback) {

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

Aber auch

.select2('val', []);

Am Ende.

Dies hat mein Problem gelöst.

  • Ich habe ein Problem mit der Verwendung des Wertattributs, da dieses auch mit Leerzeichen übermittelt wird. Ich habe versucht, es leer zu lassen und dies dynamisch aus data-initvalue in den select2-Parametern zu ziehen, aber das funktioniert nicht. Gibt es eine Möglichkeit, ohne das Wertattribut zu definieren?

    – Ravi

    26. September 2013 um 17:53 Uhr

  • Was meinst du damit, dass es auch mit Leerzeichen gesendet wird? Wenn Sie den Wert löschen, wird der ursprünglich angegebene Wert übermittelt?

    – Benutzer1983983

    26. September 2013 um 18:38 Uhr

  • Meinst du initSelection?

    Benutzer657199

    24. August 2015 um 20:15 Uhr

  • es zeigt nur leer oder leer an

    – YXN

    30. Oktober 2017 um 10:52 Uhr

Benutzer-Avatar
gabisajr

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 funktioniert für Personen, die dieselbe Ansicht für mehrere Abschnitte auf der Seite verwenden, wobei es auf die gleiche Weise für das automatische Festlegen von Standardeinstellungen auf Ihrer Seite ODER besser eine EDIT-Seite funktioniert.

Das “FOR” durchläuft das Array, das bereits vorhandene Optionen im DOM geladen hat.

1227280cookie-checkAnfangswerte beim Laden mit Select2 mit Ajax setzen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy