Attiva l'evento change () quando si imposta il valore di <select> con la funzione val ()

Qual è il modo più semplice e migliore per attivare l' evento change quando si imposta il valore dell'elemento select .

Mi aspettavo che eseguendo il seguente codice

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

o

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

porterebbe a innescare l'evento di cambiamento, che penso sia una cosa piuttosto logica da fare. Destra?

Bene, non è così. In questo caso è necessario attivare l'evento change ()

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

o

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

ma sto cercando una soluzione che possa innescare un evento di cambiamento non appena il valore di select viene modificato da un codice javascript.

Ho avuto un problema molto simile e non sono del tutto sicuro di ciò che stai riscontrando, poiché il codice suggerito ha funzionato perfettamente per me. E ' immediatamente (un requisito del tuo) fa scattare il seguente codice di cambiamento.

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

Quindi prendo il valore dal database (questo viene utilizzato su un modulo sia per il nuovo input che per la modifica dei record esistenti), lo imposto come valore selezionato e aggiungo il pezzo che mi mancava per attivare il codice sopra " , .change () ".

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

In modo che se il valore esistente dal database è 'N', nasconde immediatamente il campo di input secondario nel mio modulo.

Una cosa che ho scoperto (nel modo più duro) è che dovresti avere

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

definito PRIMA di utilizzare

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

o

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

La risposta diretta è già in una domanda duplicata: perché l'evento change jquery non si attiva quando imposto il valore di una selezione usando val ()?

Come probabilmente saprai, l'impostazione del valore di select non attiva l'evento change (), se stai cercando un evento che viene generato quando il valore di un elemento è stato modificato tramite JS non ce n'è uno.

Se vuoi davvero farlo, immagino che l'unico modo sia scrivere una funzione che controlla il DOM su un intervallo e tiene traccia dei valori modificati, ma sicuramente non farlo a meno che non sia necessario (non sono sicuro del motivo per cui avresti mai bisogno)

Aggiunta questa soluzione:
un'altra possibile soluzione sarebbe quella di creare la propria .val()funzione wrapper e fare in modo che attivasse un evento personalizzato dopo aver impostato il valore .val(), quindi quando si utilizza il wrapper .val () per impostare il valore di un <select>, si attiverà l'evento personalizzato che puoi intrappolare e gestire.

Assicurati di farlo return this, quindi è concatenabile in modo jQuery

Lo separo e quindi uso un confronto di identità per dettare ciò che fa dopo.

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

Poiché jQuery non attiverà un evento di modifica nativo ma innescherà solo il proprio evento di modifica. Se si associa un evento senza jQuery e quindi si utilizza jQuery per attivarlo, i callback associati non verranno eseguiti!

La soluzione è quindi come di seguito (funzionante al 100%):

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