jquery - ejemplo - Evento de cambio de gatillo() al configurar el valor de<select> con la función val()

onchange jquery select

Question

¿Cuál es la forma más fácil y mejor para desencadenar 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 lugar a la activación del evento de cambio, que creo que es bastante lógico que se haga. ¿Derecha?

Bueno, no es el caso. Necesitas ganar el evento change () haciendo esto

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

o

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

pero estoy buscando alguna solución que desencadenaría un evento de cambio tan pronto como el código de JavaScript modifique el valor de selección.

Answer 1

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

Como probablemente sepa, establecer el valor de la selección no desencadena 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 compruebe el DOM en un intervalo y rastree los valores modificados, pero definitivamente no hagas esto a menos que debas (no estoy seguro de por qué lo necesitarías)

Agregó esta solución:
Otra posible solución sería crear su propia función de envoltura .val() y hacer que active un evento personalizado después de establecer el valor a través de .val() , luego cuando use su contenedor .val () para establecer el valor de un <select> desencadenará su evento personalizado que puede atrapar y manejar.

Asegúrese de return this , por lo que es encadenable en jQuery

Answer 2

Lo separo, y luego uso una comparación de identidad para dictar lo que sigue.

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

Answer 3

Tuve un problema muy similar y no estoy muy seguro de con qué tienes un problema, ya que tu código sugerido funcionó muy bien para mí. Inmediatamente (un requisito suyo) desencadena 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 la entrada nueva y la edición de registros existentes), lo configuro como el valor seleccionado y agrego la pieza que me falta 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'', inmediatamente oculta el campo de entrada secundario en mi formulario.

Answer 4

Una cosa que descubrí (de la manera más difícil), es que deberías tener

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

definido ANTES de que esté usando

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

o

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