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

132

¿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.

— Goran Radulovic
fuente

javascript element.addEventListener puro?

— Manuel Bitto

44

$ ('select # some'). val (10) .change (); Es casi instantáneo para el usuario.

— Dimitri

@ Manuel, lo he intentado. Se usa object.change = function (.... y object.addEventListener (... pero ninguno de object.value, $ (object) .val () y $ (object) .attr ('value') desencadenaría esa lista

— Goran Radulovic

124

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.

— critico
fuente

Esto es exactamente lo que necesitaba. ¿Cuál es la mejor manera de descubrir cómo activar dinámicamente los controladores de eventos DOM? ¿JQuery documenta esto bien? ¡Gracias!

— Con Antonakos

2

$ ("# discount_type") .val (2) .trigger ('cambio');

— Satanand Tiwari

$ ('# add_itp_spt_parent_id'). val (add_fpt_val) .trigger ('cambio'); $ ('# add_itp_spt_parent_id'). change (); Ambas soluciones no funcionan.

— Kamlesh

función de cambio definida ANTES de que esté utilizando, resolvió mi problema. Gracias.

— Kamlesh

45

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();

— Dima R.
fuente

44

Publicación anterior, pero esto resolvió mi problema, me salvó de un craqueo cerebral largo aliento ... Debe definir el oyente antes de usarlo. Incluso en JavaScript puro.

— Temitayo

¿Puedes elaborar un poco? ¿No es el "cambio ()" por esta razón?

— Dima R.

Bueno, diré que tal vez los oyentes de este tipo no están en carga, en mi proyecto, llamé al change()antes de definir el oyente y no funcionó hasta que moví la change()llamada debajo del oyente y funcionó. Bueno, diré que esto no debería ser un problema, es solo una cuestión de la forma en que estructura su código.

— Temitayo

1

Esto es lo que necesitaba. Me llevó una eternidad resolver este problema, gracias.

— Jamie M.

¡¡¡Bravo!!! "definió la función de cambio ANTES de usar", resolvió mi problema. Gracias querido.

— Kamlesh

17

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

— Clarence Liu
fuente

He leído varios foros sobre esta pregunta, y su respuesta fue la última finalización que estaba buscando. La idea del seguimiento solo funciona como un experimento mental, obviamente no sería práctico, pero es ilustrativo; y la idea de la envoltura es increíble, y gracias por señalar la parte "devolver esto". Saludos.

— David L

¿Por qué no $('select').val(value).change()funciona todo el tiempo? ¿Alguna explicación clara?

— Istiaque Ahmed

2

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(); }
});

— Beaumont
fuente

2

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"));

— Mohamed23gharbi
fuente