Activa el evento de cambio <seleccionar> usando jquery

146

¿hay alguna forma de que pueda activar un evento de cambio en el cuadro de selección en la carga de la página y seleccionar una opción en particular?

También la función se ejecuta agregando el disparador después de vincular la función al evento.

Estaba tratando de generar algo como esto

<select class="check">
<option value="one">one</option>
<option value="two">two</option>
</select>

$(function(){
    $('.check').trigger('change'); //This event will fire the change event. 
    $('.check').change(function(){
      var data= $(this).val();
      alert(data);            
    });
});

http://jsfiddle.net/v7QWd/1/

jquery

— kishanio
fuente

¿Desea establecer una opción particular en la carga? o quieres activar tu evento de cambio?

— Manse

¿Podría ampliar la solución final? ¿Intenta forzar una opción cuando se carga la página o seleccionar una opción diferente cuando se selecciona algo específico?

— Matthew Riches

hola, gracias por sus comentarios, pude resolver el problema y lo he documentado.

— kishanio

288

Use val()para cambiar el valor (no el texto) y trigger()disparar manualmente el evento.

El controlador de eventos de cambio debe declararse antes del desencadenante.

Aquí hay una muestra

$('.check').change(function(){
  var data= $(this).val();
  alert(data);            
});

$('.check')
    .val('two')
    .trigger('change');

— Joseph
fuente

Además, después de cambiar la opción, quería ejecutar la función de cambio de evento. wrt esto . cuadro de alerta debe ejecutarse.

— kishanio

@KishanThobhani deberías llamarlo después de agregar el controlador. ver la muestra

— Joseph

77

La parte importante de esta solución es: El controlador de eventos de cambio DEBE declararse ANTES del disparador (tiene sentido ...), en mi caso ese fue el problema, ¡gracias!

— Larzan

Ayudó como Salvador, gracias @Joseph

— Divya

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

— Kamlesh

28

Para seleccionar una opción, use .val('value-of-the-option')en el elemento select. Para activar el elemento de cambio, use .change()o .trigger('change').

Los problemas en su código son la coma en lugar del punto $('.check'),trigger('change');y el hecho de que lo llame antes de vincular el controlador de eventos.

— ThiefMaster
fuente

10

$('#edit_user_details').find('select').trigger('change');

Cambiaría el elemento desplegable de selección de etiqueta html con id="edit_user_details".

— Sohail xIN3N
fuente

7

Otra solución de trabajo para aquellos que fueron bloqueados con el controlador de gatillo jQuery, que no se disparará en eventos nativos será el siguiente (100% de trabajo):

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

— Mohamed23gharbi
fuente

1

Intenté todo lo anterior, pero solo este funciona para mí. Creo, porque mi selección estaba dentro de vue. Gracias @ Mohamed23gharbi!

— Tillito

1

Igual que aquí. Esta es la solución que he estado buscando durante una hora. Gracias.

— mberna

1

¡Esta debe ser la respuesta!

— MARS

1

Dar enlaces en valor de la etiqueta de opción

<select size="1" name="links" onchange="window.location.href=this.value;">
   <option value="http://www.google.com">Google</option>
   <option value="http://www.yahoo.com">Yahoo</option>
</select>

— Afraz Ahmad
fuente

1

Si desea hacer algunas comprobaciones, utilice de esta manera

 <select size="1" name="links" onchange="functionToTriggerClick(this.value)">
    <option value="">Select a Search Engine</option>        
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
</select>

<script>

   function functionToTriggerClick(link) {

     if(link != ''){
        window.location.href=link;
        }
    }  

</script>

— Afraz Ahmad
fuente

0

Basado en la respuesta de Mohamed23gharbi:

function change(selector, value) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.value = value;
    sortBySelect.dispatchEvent(new Event("change"));
}

function click(selector) {
    var sortBySelect = document.querySelector(selector);
    sortBySelect.dispatchEvent(new Event("click"));
}

function test() {
    change("select#MySelect", 19);
    click("button#MyButton");
    click("a#MyLink");
}

En mi caso, donde los elementos fueron creados por vue, esta es la única forma en que funciona.

— Tillito
fuente

0

Puede probar el siguiente código para resolver su problema:

Por defecto, la primera opción select: jQuery ('. Select'). Find ('option') [0] .selected = true;

Gracias Ketan T

— Ketan Tambekar
fuente