Activa el evento change () al configurar el valor de <select> con la función val ()

¿Cuál es la manera más fácil y mejor de activar un evento de cambio al establecer el valor del elemento seleccionado ?

Esperaba que ejecutando el siguiente código

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

o

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

daría como resultado la activación del evento de cambio, lo que creo que es bastante lógico. ¿Correcto?

Bueno, no es el caso. Necesita hacer un evento triger change () haciendo esto

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

o

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

pero estoy buscando alguna solución que desencadene un evento de cambio tan pronto como el valor de select sea cambiado por algún código javascript.

Tuve un problema muy similar y no estoy muy seguro de con qué está teniendo problemas, ya que su código sugerido funcionó muy bien para mí. Es inmediato (un requisito de la suya) se inicia el siguiente código de cambio.

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

Luego tomo el valor de la base de datos (esto se usa en un formulario para entradas nuevas y para editar registros existentes), lo configuro como el valor seleccionado y agrego la pieza que me faltaba para activar el código anterior, ".change () ".

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

De modo que si el valor existente de la base de datos es 'N', oculta inmediatamente el campo de entrada secundario en mi formulario.

Una cosa que descubrí (por las malas) es que deberías tener

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

definido ANTES de usar

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

o

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

La respuesta directa ya está en una pregunta duplicada: ¿por qué el evento jquery change no se activa cuando configuro el valor de una selección usando val ()?

Como probablemente sepa, establecer el valor de la selección no activa el evento change (), si está buscando un evento que se activa cuando el valor de un elemento se ha cambiado a través de JS, no hay ninguno.

Si realmente quieres hacer esto, supongo que la única forma es escribir una función que verifique el DOM en un intervalo y rastree los valores cambiados, pero definitivamente no hagas esto a menos que debas hacerlo (no estoy seguro de por qué lo necesitarías)

Se agregó esta solución:
otra posible solución sería crear su propia .val()función de contenedor y hacer que active un evento personalizado después de establecer el valor .val(), luego, cuando use su contenedor .val () para establecer el valor de un <select>, activará su evento personalizado que puedes atrapar y manejar.

Asegúrate de return thisque sea encadenable en la moda jQuery

Lo separo y luego uso una comparación de identidad para dictar qué se hará a continuación.

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

Como jQuery no activará un evento de cambio nativo, solo activará su propio evento de cambio. Si vincula un evento sin jQuery y luego usa jQuery para activarlo, ¡las devoluciones de llamada que enlazó no se ejecutarán!

La solución es la siguiente (100% de trabajo):

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