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
});
jquery
search
jquery-select2
spyfx
quelle
quelle
Antworten:
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 vonselect2-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-selecting
lautet die Dokumentation für :in der Erwägung, dass Veränderung:
Dies ist
change
mö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.quelle
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
quelle
Für mich geht das:
$('#yourselect').on("change", function(e) { // what you would like to happen });
quelle
.change
Ereignis später in der Ausführungsreihe als dasselect2:select
Ereignis eintritt . Für mich habe ich versucht, das CSS der Auswahl zu erfassen,select2:select
aber obwohl ich es im Inspektor gesehen habe, konnte ich es nicht über erfassenselect2:select
- als ich es geändert habe, hat.change
es funktioniert, weil Select2 dasselect2:select
Ereignis ausgelöst hat , bevor das CSS für die ursprüngliche Auswahl aktualisiert wurde. Ein bisschen verrückt , meiner Meinung nach.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 });
quelle
e.params.args.data
Für oben v4
$('#yourselect').on("select2:select", function(e) { // after selection of select2 });
quelle
//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); });
quelle