it-swarm.com.de

Change () - Ereignis auslösen, wenn der Wert von <select> mit der Funktion val () eingestellt wird

Was ist der einfachste und beste Weg, das change -Ereignis auszulösen, wenn Sie den Wert des select -Elements festlegen.

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 eine ziemlich logische Sache ist. Recht?

Nun, das ist nicht der Fall. Sie müssen das change () -Ereignis auf diese Weise 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 JavaScript-Code geändert wird.

117
Goran Radulovic

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

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

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

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

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

111
criticman

Eine Sache, die ich herausgefunden habe (der harte Weg), ist, dass Sie es haben sollten 

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

definiert, BEVOR Sie verwenden 

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

oder

 $('#selectField').val(10).change();
36
Dima R.

Die direkte Antwort ist bereits in einer doppelten Frage enthalten: Warum wird das Jquery-Änderungsereignis nicht ausgelöst, wenn ich den Wert eines select mit val () setze?

Wie Sie wahrscheinlich wissen, wird das change () -Ereignis durch Einstellen des Werts von select nicht ausgelöst. Wenn Sie nach einem Ereignis suchen, das ausgelöst wird, wenn der Wert eines Elements durch JS geändert wurde, gibt es kein Ereignis.

Wenn Sie dies wirklich tun möchten, ist die einzige Möglichkeit, eine Funktion zu schreiben, die den DOM in einem Intervall überprüft und geänderte Werte aufzeichnet, aber tun Sie dies auf jeden Fall, es sei denn, Sie müssen dies tun (wissen Sie nicht, warum Sie dies jemals tun müssten)

Diese Lösung wurde hinzugefügt:
Eine andere mögliche Lösung wäre, eine eigene .val()-Wrapper-Funktion zu erstellen, die ein benutzerdefiniertes Ereignis auslöst, nachdem der Wert durch .val() festgelegt wurde. Wenn Sie dann Ihren .val () -wrapper verwenden, um den Wert eines <select> festzulegen, wird Ihr Wert ausgelöst Benutzerdefiniertes Ereignis, mit dem Sie abfangen können .

Vergewissern Sie sich, dass return this in jQuery-Art verkettet ist

16
Clarence Liu

Ich trenne es und verwende dann einen Identitätsvergleich, um zu bestimmen, was als Nächstes geschieht. 

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

Da jQuery kein natives Änderungsereignis auslöst, sondern nur ein eigenes Änderungsereignis. Wenn Sie das Ereignis ohne jQuery binden und dann mit jQuery auslösen, werden die von Ihnen gebundenen Callbacks 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"));
0
Mohamed23gharbi