2015-04-17 17 views
13

Ich benutze select2 Version 4.0, und ich versuche, eine programmatische Auswahl zu einem Auswahlfeld, das seine Daten von einem Ajax-Aufruf erhält.Programmatische Auswahl von select2, die ihre Daten über Ajax abruft

In der Dokumentation habe ich gefunden, wie Sie einen Wert programmgesteuert auf ein reguläres select2 setzen, aber ich kann nicht herausfinden, wie dies mit einer Ajax-Auswahl zu tun.

Wenn ich mich richtig erinnere, in der alten Version, können Sie den aktuellen Wert könnten ein Datum an das select2 mit diesem Befehl, indem:

jQuery("selectbox").select2("data", data) 

ich das versucht habe, und ein Datenobjekt gesendet mit , ID, Text und Ergebnis, aber nichts sichtbar passiert, und wenn ich den Status des Auswahlfelds abfragen, um die ausgewählten Werte zu sehen, gibt es null zurück.

Wurde diese Option entfernt oder einfach geändert? Wo finde ich das in der Dokumentation oder wie kann ich das gewünschte Verhalten erreichen?

+3

jede Geige Demo? – nirmal

Antwort

8

Die einzige Möglichkeit, dies zu erreichen, besteht darin, zuerst ein <option> zum ausgewählten dom mit den Daten hinzuzufügen, die Sie auswählen möchten, und gleich danach wählen Sie es wie mit einem normalen Auswahlfeld. Dies war auch die offizielle Antwort von Kevin-Brown auf ihrer Github-Projektseite.

https://github.com/select2/select2/issues/3273

Also, basicaly, wenn Sie wissen, was würden Sie wählen möchten, können Sie leicht ein <option> Element aus, fügen Sie es zu dem ursprünglichen Auswahlfeld erstellen und dann auswählen, indem es Wert ist:

var option=jQuery("<option>").attr("value","your_id_here").html("your_text_here"); 
jQuery("selectbox").append(option); 
jQuery("selectbox").val("your_id_here").trigger("change"); 
+0

Das war, was ich vermeiden wollte - die Liste selbst zu füllen, von meinem JS-Code. Ich wollte select2 bitten, den AJAX-Ladevorgang auszuführen, der beim Klicken auf den Befehl ausgeführt wird, und dann eines der neu geladenen Ergebnisse in meinem JS-Code auswählen. Sieht so aus, als ob das nicht möglich ist? –

+1

Der erste Teil, was Sie benötigen, ist PERHAPS möglich (ich muss darauf achten), aber der Auswahlteil ist nur durch die oben erwähnte Lösung machbar (zumindest mit der Version 4.0). Vielleicht werden die Leute, die dieses geniale Plugin gemacht haben, in den späteren Versionen eine programmatische Lösung einbauen, lasst uns hoffen :) In der Zwischenzeit werde ich prüfen, ob das Suchfeld per Javascript gefüllt wird, ohne einen Klick ist irgendwie möglich, oder nicht, ich Ich werde so schnell wie möglich mit meinen Ergebnissen zurückkommen –

4

Ich würde auch gerne eine vollständige Antwort auf diese Frage kennen, aber hier ist eine Teillösung:

$('#select2-control-id').val('item-id').trigger('select2:select').trigger('change'); 

Dies scheint nur zu funktionieren, wenn die select2 bereits das Element geladen, nach dem Sie fragen - dh es ist eine, auf die du bereits geklickt hast.

Nicht nur müssen Sie das Dropdown manuell geöffnet haben, damit es die erste Seite der Elemente über AJAX lädt - Sie müssen auch tatsächlich auf geklickt haben, die Sie programmgesteuert später auswählen möchten.

Dies scheint zu sein, weil es nur zu dem zugrunde liegenden select Element hinzufügt, wenn Sie tatsächlich auf sie klicken.

Ich kann keine Möglichkeit sehen, programmgesteuert select2 zu sagen, um die erste Seite der AJAX-Ergebnisse zu laden.

0

Sie können dies versuchen.

Laden Sie die Daten in eine Div #LoadMachine und in Ergebnis können Sie Select2 laden.

1

Es ist einfach, die versteckte <select/> Box zu manipulieren:

//set first option as selected 
$("select [value='0']").attr("selected","selected"); 
$("select").trigger("change"); 

Demo

Verwandte Themen