Lösen Sie das Ereignis change () aus, wenn Sie den Wert von <select> mit der Funktion val () einstellen

132

Was ist die einfachste und beste Weg , um Trigger ändern Ereignis , wenn der Wert der Einstellung wählen Element.

Ich habe erwartet, dass der folgende Code ausgeführt wird

$('select#some').val(10);

oder

$('select#some').attr('value',  10);

würde dazu führen, dass das Änderungsereignis ausgelöst wird, was meiner Meinung nach ziemlich logisch ist. Richtig?

Nun, das ist nicht der Fall. Auf diese Weise müssen Sie das Ereignis change () auslösen

$('select#some').val(10).change();

oder

$('select#some').val(10).trigger('change');

aber ich suche nach einer Lösung, die ein Änderungsereignis auslösen würde, sobald der Wert von select durch einen Javascript-Code geändert wird.

Goran Radulovic
quelle
reines Javascript element.addEventListener?
Manuel Bitto
4
$ ('select # some'). val (10) .change (); ist für den Benutzer ziemlich augenblicklich.
Dimitri
@ Manuel Ich habe das versucht. Ich habe object.change = function (.... und object.addEventListener (... aber keinen der object.value, $ (object) .val () und $ (object) .attr ('value') verwendet. würde diesen Listener auslösen
Goran Radulovic

Antworten:

124

Ich hatte ein sehr ähnliches Problem und bin mir nicht ganz sicher, womit Sie ein Problem haben, da Ihr vorgeschlagener Code für mich hervorragend funktioniert hat. Es löst sofort (eine Anforderung von Ihnen) den folgenden Änderungscode aus.

$('#selectField').change(function(){
    if($('#selectField').val() == 'N'){
        $('#secondaryInput').hide();
    } else {
        $('#secondaryInput').show();
}
});

Dann nehme ich den Wert aus der Datenbank (dies wird in einem Formular sowohl für die neue Eingabe als auch für die Bearbeitung vorhandener Datensätze verwendet), setze ihn als ausgewählten Wert und füge das fehlende Teil hinzu, um den obigen Code auszulösen: ".change () ".

$('#selectField').val(valueFromDatabase).change();

Wenn der vorhandene Wert aus der Datenbank 'N' ist, wird das sekundäre Eingabefeld in meinem Formular sofort ausgeblendet.

Kritiker
quelle
Genau das brauchte ich. Was ist der beste Weg, um herauszufinden, wie DOM-Ereignishandler dynamisch ausgelöst werden können? Dokumentiert jQuery dies gut? Danke dir!
Con Antonakos
2
$ ("# discount_type") .val (2) .trigger ('change');
Satan und Tiwari
$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('change'); $ ('# add_itp_spt_parent_id'). change (); Beide Lösungen funktionieren nicht.
Kamlesh
definierte Änderungsfunktion BEVOR Sie verwenden, hat mein Problem gelöst. Vielen Dank.
Kamlesh
45

Eine Sache, die ich herausgefunden habe (auf die harte Tour), ist, dass Sie haben sollten

$('#selectField').change(function(){
  // some content ...
});

definiert, BEVOR Sie verwenden

$('#selectField').val(10).trigger('change');

oder

 $('#selectField').val(10).change();
Dima R.
quelle
4
Alter Beitrag, aber dies löste mein Problem, rettete mich vor einem langwierigen Gehirnriss ... Sie müssen den Hörer definieren, bevor Sie ihn verwenden. Auch in reinem JavaScript.
Temitayo
Können Sie etwas näher darauf eingehen? Gibt es aus diesem Grund nicht das "change ()"?
Dima R.
Nun, ich werde sagen, dass Hörer dieser Art möglicherweise nicht unter Last gehisst werden. In meinem Projekt habe ich das angerufen, change()bevor ich den Hörer definiert habe, und es hat nicht funktioniert, bis ich den change()Anruf unter den Hörer verschoben habe und es funktioniert hat. Nun, ich werde sagen, dass dies kein Problem sein sollte, es ist nur eine Frage der Art und Weise, wie Sie Ihren Code strukturieren.
Temitayo
1
Das brauchte ich. Ich habe ewig gebraucht, um dieses Problem zu lösen, danke.
Jamie M.
Bravo!!! "definierte Änderungsfunktion BEVOR Sie verwenden", löste mein Problem. Danke, Schatz.
Kamlesh
17

Die klare Antwort ist bereits in einer doppelten Frage enthalten: Warum wird das Ereignis jquery change nicht ausgelöst, wenn ich den Wert einer Auswahl mit val () festlege?

Wie Sie wahrscheinlich wissen, löst das Festlegen des Werts für select das Ereignis change () nicht aus. Wenn Sie nach einem Ereignis suchen, das ausgelöst wird, wenn der Wert eines Elements über JS geändert wurde, gibt es keines.

Wenn Sie dies wirklich tun möchten, besteht die einzige Möglichkeit darin, eine Funktion zu schreiben, die das DOM in einem Intervall überprüft und geänderte Werte verfolgt. Tun Sie dies jedoch definitiv nicht, es sei denn, Sie müssen (nicht sicher, warum Sie dies jemals tun müssten).

Diese Lösung wurde hinzugefügt:
Eine andere mögliche Lösung besteht darin, eine eigene .val()Wrapper-Funktion zu erstellen und nach dem Festlegen des Werts ein benutzerdefiniertes Ereignis auslösen zu lassen. .val()Wenn Sie dann den Wert eines .val () -Wrappers zum Festlegen eines Werts festlegen <select>, wird Ihr benutzerdefiniertes Ereignis ausgelöst die Sie fangen und handhaben können.

return thisStellen Sie sicher , dass es in jQuery-Manier verkettbar ist

Clarence Liu
quelle
Ich habe mehrere Foren zu dieser Frage gelesen und Ihre Antwort war die letzte Fertigstellung, nach der ich gesucht habe. Die Idee des Trackings funktioniert nur als mentales Experiment, offensichtlich wäre es völlig unpraktisch, aber es ist illustrativ; und die Idee des Wrappers ist großartig, und ich danke Ihnen, dass Sie auf den Teil "return this" hingewiesen haben. Grüße.
David L
Warum $('select').val(value).change()funktioniert nicht die ganze Zeit? Irgendeine klare Erklärung?
Istiaque Ahmed
2

Ich trenne es und verwende dann einen Identitätsvergleich, um zu diktieren, was als nächstes getan wird.

$("#selectField").change(function(){
  if(this.value === 'textValue1'){ $(".contentClass1").fadeIn(); }
  if(this.value === 'textValue2'){ $(".contentclass2").fadeIn(); }
});
Beaumont
quelle
2

Da jQuery kein natives Änderungsereignis auslöst, sondern nur ein eigenes Änderungsereignis. Wenn Sie ein Ereignis ohne jQuery binden und dann mit jQuery auslösen, werden die von Ihnen gebundenen Rückrufe nicht ausgeführt!

Die Lösung ist dann wie folgt (100% Arbeit):

var sortBySelect = document.querySelector("select.your-class"); 
sortBySelect.value = "new value"; 
sortBySelect.dispatchEvent(new Event("change"));
Mohamed23gharbi
quelle