Legen Sie den Wert eines Select2-Ajax programmgesteuert fest
Lesezeit: 7 Minuten
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.
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
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:
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:
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
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.
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"); });
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.
12171300cookie-checkLegen Sie den Wert eines Select2-Ajax programmgesteuert festyes