Lösen Sie nach Auswahl von select2 eine Aktion aus

78

Ich verwende die select2-Bibliothek für meine Suche.
Gibt es eine Möglichkeit, nach Auswahl eines Suchergebnisses eine Aktion auszulösen? Öffnen Sie beispielsweise ein Popup oder eine einfache JS-Warnung.

$("#e6").select2({
    placeholder: "Enter an item id please",
    minimumInputLength: 1,
    ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
        url: "index.php?r=sia/searchresults",
        dataType: 'jsonp',
        quietMillis: 3000,
        data: function (term, page) {
        return {
            q: term, // search term
            page_limit: 10,
            id: 10
            };
        },
        results: function (data, page) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        },
    },

    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
spyfx
quelle
1
Sie können an das 'change'-Ereignis binden. Auf dem Link, den Sie angegeben haben, befindet sich ein Abschnitt mit dem Namen "Events" mit einem sehr langen Code-Snippet für alle verschiedenen Ereignisbindungen.
Ross

Antworten:

167

Siehe den Abschnitt Dokumentationsereignisse

Abhängig von der Version sollte eines der folgenden Snippets das gewünschte Ereignis enthalten. Alternativ können Sie einfach "select2-selected" durch "change" ersetzen.

Version 4.0 +

Ereignisse haben jetzt das folgende Format: select2:selecting(anstelle von select2-selecting)

Vielen Dank an snakey für die Benachrichtigung, dass sich dies ab 4.0 geändert hat

$('#yourselect').on("select2:selecting", function(e) { 
   // what you would like to happen
});

Version vor 4.0

$('#yourselect').on("select2-selecting", function(e) { 
   // what you would like to happen
});

Zur Verdeutlichung select2-selectinglautet die Dokumentation für :

select2-selected Wird ausgelöst, wenn eine Auswahl in der Dropdown-Liste ausgewählt wird, jedoch bevor Änderungen an der Auswahl vorgenommen wurden. Dieses Ereignis wird verwendet, damit der Benutzer die Auswahl durch Aufrufen von event.preventDefault () ablehnen kann.

in der Erwägung, dass Veränderung:

change Wird ausgelöst, wenn die Auswahl geändert wird.

Dies ist changemöglicherweise besser für Ihre Anforderungen geeignet, je nachdem, ob Sie die Auswahl abschließen und dann Ihre Veranstaltung durchführen oder die Änderung möglicherweise blockieren möchten.

Ross
quelle
13
Ereignisse haben in neueren Versionen andere Namen (z. B. 'select2: select'), siehe https://select2.github.io/examples.html
snakey
1
Ereignisse finden Sie hier im Dokument. Nicht offensichtlich mit dem FAQ-Stil.
Pierre de LESPINAY
1
Der Aufruf "Auswählen" erfolgt unmittelbar vor dem Einstellen des Wertes. was dazu führen wird, dass "console.log ($ (this) .val ())" einen leeren Wert
ausgibt
Als ich es in meiner Winkelanwendung versuchte, gab es mir falsche Werte. Angenommen, es gibt 4 Werte in select2-Optionen. 1 Minute, 5 Minuten, 1 Stunde, täglich. Verwenden Sie jetzt $ ('# yourselect'). On ("select2-selected", Funktion (e) {...} Es gab mir den vorherigen Wert, den ich ausgewählt habe.
Yash Jain
Stattdessen habe ich $ ('# yourselect'). On ("select2-select"), Funktion (e) {...} ausprobiert. Das hat bei mir funktioniert
Yash Jain
25

Es wurden einige Änderungen an den Namen der select2-Ereignisse vorgenommen (ich denke in Version 4 und höher), sodass das '-' in dieses ':' geändert wird .
Siehe die nächsten Beispiele:

$('#select').on("select2:select", function(e) { 
    //Do stuff
});

Sie können alle Ereignisse auf der Plugin-Site 'select2' überprüfen: select2 Events

Tarek
quelle
13

Für mich geht das:

$('#yourselect').on("change", function(e) { 
   // what you would like to happen
});
Roby Sottini
quelle
Ich verstehe nicht warum, aber das hat bei mir funktioniert, als Tareks Antwort es nicht tat. Ich habe sogar seine Antwort erhalten, in einem separaten Projekt zu arbeiten, aber aus irgendeinem Grund war dies die einzige Überschreibung, die mein Projekt zum Laufen gebracht hat.
tokyo0709
@ tokyo0709 Es funktioniert, weil das .changeEreignis später in der Ausführungsreihe als das select2:selectEreignis eintritt . Für mich habe ich versucht, das CSS der Auswahl zu erfassen, select2:selectaber obwohl ich es im Inspektor gesehen habe, konnte ich es nicht über erfassen select2:select- als ich es geändert habe, hat .changees funktioniert, weil Select2 das select2:selectEreignis ausgelöst hat , bevor das CSS für die ursprüngliche Auswahl aktualisiert wurde. Ein bisschen verrückt , meiner Meinung nach.
a20
1
@ a20 Manchmal ist es eine einfache Problemumgehung , die dom-Elemente css über HTML-css festzulegen, damit Sie nicht warten müssen, bis die Javascript-Engine aufholt. In einigen Fällen funktioniert es gut.
Yardpenalty.com
5

Gemäß meiner Verwendung über Version 4 wird dies funktionieren

$('#selectID').on("select2:select", function(e) { 
    //var value = e.params.data;  Using {id,text format}
});

Und für weniger als v.4 wird das funktionieren:

$('#selectID').on("change", function(e) { 
   //var value = e.params.data; Using {id,text} format
});
amku91
quelle
Das funktioniert bei mir nicht. Ich habe den obigen Code wie unten angegeben geändert. e.params.args.data
Tushar Saxena
Dies hat auch bei mir nicht funktioniert, e.params.data durch Datenfeld nicht für undefiniert gefunden. Bei näherer Betrachtung wurde kein Parameterfeld für e festgelegt. Für mein Problem musste ich nur den Wert lesen, damit e.val für mich ausreichte.
NemyaNation
2

Für oben v4

$('#yourselect').on("select2:select", function(e) { 
     // after selection of select2 
});
Lösungsgeist
quelle
0
//when a Department selecting
$('#department_id').on('select2-selecting', function (e) {
    console.log("Action Before Selected");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});

//when a Department removing
$('#department_id').on('select2-removing', function (e) {
    console.log("Action Before Deleted");
    var deptid=e.choice.id;
    var depttext=e.choice.text;
    console.log("Department ID "+deptid);
    console.log("Department Text "+depttext);
});
Uma Shankar Pandey
quelle