Legen Sie den Wert eines Select2-Ajax programmgesteuert fest

Lesezeit: 7 Minuten

Benutzer-Avatar
Kaponika

Ich habe eine Select2-Autovervollständigungseingabe (erstellt über SonataAdmin), kann aber nicht für mein Leben herausfinden, wie ich sie programmgesteuert auf ein bekanntes Schlüssel/Wert-Paar setzen kann.

Es gibt eine JS-Geige hier das zeigt ungefähr, was ich habe. Was ich wissen möchte ist, welche Funktion ich dem Button damit zuordnen kann

  • das Select2-Feld zeigt dem Benutzer den Text “NEW VALUE” an, und
  • das Select2-Feld übermittelt den Wert „1“, wenn das Formular an den Server gesendet wird

Ich habe alle möglichen Kombinationen von jQuery und Select2 ausprobiert data und val Methoden, die gegen verschiedene Eingaben auf der Seite aufgerufen werden, aber nichts scheint zu funktionieren … gibt es doch sicher eine Möglichkeit, dies zu tun?

— Bearbeiten —

Die akzeptierte Antwort unten ist sehr nützlich, hilft, etwas Licht in den richtigen Weg zu bringen, um die Auswahl zu initialisieren, und erklärt, wofür initSelection ist.

Abgesehen davon scheint mein größter Fehler hier die Art und Weise gewesen zu sein, wie ich versucht habe, die Veränderung auszulösen.

Ich benutzte:

$(element).select2('data', newObject).trigger('change');

Dies führt jedoch zu einem leeren add Objekt innerhalb des Änderungsereignisses von select2.

Wenn Sie stattdessen Folgendes verwenden:

$(element).select2('data', newObject, true);

dann funktioniert der code wie er soll, mit der newObject im Änderungsereignis von select2 verfügbar sind und die Werte korrekt eingestellt sind.

Ich hoffe, diese zusätzlichen Informationen helfen jemand anderem!

Benutzer-Avatar
Markieren

Beachten Sie, dass dies mit Version 4+ getestet wurde

Ich konnte endlich Fortschritte machen, nachdem ich diese Diskussion gefunden hatte: https://groups.google.com/forum/#!topic/select2/TOh3T0yqYr4

Der letzte Kommentar erwähnt eine Methode, die ich erfolgreich anwenden konnte.

Beispiel:

$("#selectelement").select2("trigger", "select", {
    data: { id: "5" }
});

Dies scheint genügend Informationen zu sein, um die Ajax-Daten abzugleichen und den Wert korrekt festzulegen. Dies hat bei benutzerdefinierten Datenadaptern immens geholfen.


Notiz: Für Mehrfachauswahlführen Sie den obigen Code für jedes Element wie folgt aus:

  // for each initially selected ids, execute the above code to add the id to the selection.
  [{id: 5, text: 'op5'}, {id: 10, text: 'op10'}].forEach(option => {
    $("#selectelement").select2("trigger", "select", {data: { id: option.id, text: option.text }});
  })

  • Nur als Hinweis: Dadurch wird das Tag

    – Markieren

    19. Juli 2016 um 14:09 Uhr

  • funktioniert in v4. fand dies nach 2 Tagen des Googelns, Durchsuchens der Dokumente usw.

    – Kaustubh

    1. September 2017 um 9:20 Uhr

  • Vielen Dank! Ihre Dokumente sagen zu verwenden new Option aber das funktioniert nicht für AJAX-Aufrufe mit benutzerdefinierten Vorlagen

    – Guss

    23. September 2017 um 16:29 Uhr

  • Es funktioniert, aber als ich versuchte, mit dieser Methode etwa 30 select2-Elemente auszuwählen, dauerte es etwa 5 oder 6 Sekunden. Ich habe ein Formular, in dem es eine Reihe von Elementen gibt. Beim Bearbeiten dieses Formulars hat die Auswahl zusätzlicher Attribute mit dieser Methode einige Zeit gedauert, sodass es bei mir nicht funktioniert hat.

    – Rupesh babu Shrestha

    2. Dezember 2017 um 12:11 Uhr

  • Die Dokumentation auf select2.org/programmatic-control/… haben Sie jetzt ein Beispiel, das dieser ursprünglichen Antwort ähnlich ist, jedoch mit einer etwas anderen Syntax. selectElement.trigger({ type: 'select2:select', params: { data: data } });

    – Markieren

    25. April um 15:39 Uhr


Benutzer-Avatar
Johannes S

Hinweis: Die Frage und diese Antwort beziehen sich auf Select2 v3. Select2 v4 hat eine ganz andere API als v3.

Ich denke, das Problem ist die initSelection Funktion. Verwenden Sie diese Funktion, um den Anfangswert festzulegen? Ich weiß, dass die Select2-Dokumentation so klingt, als wäre das ihr Zweck, aber es heißt auch: “Im Wesentlichen ist dies eine ID-> Objektzuordnungsfunktion”, und so haben Sie es nicht implementiert.

Aus irgendeinem Grund der Anruf an .trigger('change') verursacht die initSelection Funktion aufgerufen werden, die den ausgewählten Wert wieder auf “ENABLED_FROM_JS” ändert.

Versuchen Sie, die loszuwerden initSelection Funktion und setzen Sie stattdessen den Anfangswert mit:

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

jsfiddle

Hinweis: Das OP hat die geliefert formatResult und formatSelection Optionen. Wie bereitgestellt erwarten diese Callback-Funktionen, dass die Elemente eine „label“-Eigenschaft statt einer „text“-Eigenschaft haben. Für die meisten Benutzer sollte es sein:

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

Mehr Infos auf der initSelection Funktion:

Wenn Sie die durchsuchen Select2-Dokumentation für “initSelection” sehen Sie, dass es verwendet wird, wenn das Element einen Anfangswert hat und wenn das Element .val() Funktion aufgerufen wird. Das liegt daran, dass diese Werte nur aus einem bestehen id und Select2 benötigt das gesamte Datenobjekt (teilweise, damit es das richtige Label anzeigen kann).

Wenn das Select2-Steuerelement eine statische Liste anzeigte, wurde die initSelection Funktion wäre einfach zu schreiben (und es scheint, als könnte Select2 sie für Sie bereitstellen). In diesem Fall ist die initSelection Funktion müsste nur nachschlagen id in der Datenliste und geben das entsprechende Datenobjekt zurück. (Ich sage hier „return“, aber es gibt das Datenobjekt nicht wirklich zurück, sondern übergibt es an eine Callback-Funktion.)

In Ihrem Fall müssen Sie wahrscheinlich nicht angeben initSelection Funktion, da Ihr Element keinen Anfangswert hat (in HTML) und Sie es nicht aufrufen werden .val() Methode. Verwenden Sie einfach weiter die .select2('data', ...) Methode zum programmatischen Festlegen von Werten.

Wenn Sie eine liefern würden initSelection Funktion für eine automatische Vervollständigung (die Ajax verwendet), müsste wahrscheinlich ein Ajax-Aufruf erfolgen, um das Datenobjekt zu erstellen.

  • Übrigens, gibt es eine Dokumentation darüber, was mit “Im Wesentlichen ist dies eine ID-> Objektzuordnungsfunktion” gemeint ist (und wie man sie in diesem Zusammenhang für ein Autocomplete-Feld verwendet)?

    – Kaponika

    20. August 2014 um 15:16 Uhr

  • 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:38 Uhr


  • Bitte aktualisieren Sie die Geige – sie schlägt mit 404 beim Laden von Ressourcen fehl

    – Zanshin13

    25. September 2015 um 8:59 Uhr

  • @ Zanshin13 – Ich habe die URLs für die externen Ressourcen in jsfiddle aktualisiert, aber ich glaube nicht, dass es jemals wirklich funktioniert hat, weil der Ajax-Aufruf nicht gültig ist.

    – Johannes S

    25. September 2015 um 18:45 Uhr

Benutzer-Avatar
Nepapu

Um Anfangswerte festzulegen, müssen Sie dem select-Element mit jQuery das erforderliche Options-Tag hinzufügen, dann diese Optionen mit der val-Methode von select2 als ausgewählt definieren und schließlich das ‘change’-Ereignis von select2 auslösen.

1.-$('#selectElement').append('<option value=someID>optionText</option>');
2.-$('#selectElement').select2('val', someID, true);

Das dritte boolesche Argument weist select2 an, das Änderungsereignis auszulösen.

Weitere Informationen finden Sie unter https://github.com/select2/select2/issues/3057

  • Sie können kein select-Element für Remote-Daten (ajax) verwenden.

    – Hahn242

    21. Mai 2016 um 7:34 Uhr

Benutzer-Avatar
lucbonnin

Seien Sie vorsichtig, es gibt einen Fehler im “validierten” Kommentar.

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

Der richtige Weg ist

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

Verwenden text Anstatt von label

Mit Select2 Version 4+ müssen Sie eigentlich nichts Besonderes tun. Standard-jQuery mit einem „Änderungs“-Ereignisauslöser am Ende funktioniert.

var $select = $("#field");
var items = {id: 1, text: "Name"}; // From AJAX etc
var data = $select.val() || [];    // If you want to merge with existing

$(items).each(function () {
  if(!$select.find("option[value="" + this.id + ""]").length) {
    $select.append(new Option(this.text, this.id, true, true));
  }
  data.push(this.id);
});

$select.val(data).trigger('change'); // Standard event notifies select2

Es gibt ein einfaches Beispiel in der Select2-Dokumentation:
https://select2.org/programmatic-control/add-select-clear-items

Benutzer-Avatar
Mogsdad

aus ihren Beispielen
https://select2.github.io/examples.html

Programmgesteuerter Zugriff:

var $example = $(".js-example-programmatic").select2();
var $exampleMulti = $(".js-example-programmatic-multi").select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });

Benutzer-Avatar
Tunaki

Alles, was Sie tun müssen, ist den Wert festzulegen und dann auszuführen: $ ('#myselect').select2 (); oder $ ('select').select2 ();. Und alles ist sehr gut aktualisiert.

1217130cookie-checkLegen Sie den Wert eines Select2-Ajax programmgesteuert fest

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

Privacy policy