Attiva l'evento change <select> usando jquery

146

c'è comunque che potrei innescare un evento di cambiamento nella casella di selezione al caricamento della pagina e selezionare una particolare opzione.

Anche la funzione eseguita aggiungendo il trigger dopo aver associato la funzione all'evento.

Stavo cercando di qualcosa di output come questo

<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
fonte

vuoi impostare una particolare opzione al caricamento? o vuoi attivare il tuo evento di modifica?

— Manse,

Potresti espandere la soluzione finale. Stai cercando di forzare un'opzione quando la pagina viene caricata o seleziona un'opzione diversa quando viene selezionato qualcosa di specifico?

— Matthew Riches,

ciao, grazie per il tuo feedback sono stato in grado di risolvere il problema e averlo documentato.

— kishanio,

288

Utilizzare val()per modificare il valore (non il testo) e trigger()per generare manualmente l'evento.

Il gestore eventi change deve essere dichiarato prima del trigger.

Ecco un esempio

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

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

— Giuseppe
fonte

Anche dopo aver modificato l'opzione, volevo eseguire la funzione di modifica degli eventi. ho scritto questo . la casella di avviso dovrebbe essere eseguita.

— kishanio,

@KishanThobhani dovresti chiamarlo dopo aver aggiunto il gestore. vedi l'esempio.

— Giuseppe,

7

La parte importante di questa soluzione è: il gestore di eventi change DEVE essere dichiarato PRIMA del trigger (ha senso ...), nel mio caso era il problema, grazie!

— Larzan,

Mi ha aiutato come Salvatore, grazie @Joseph

— Divya il

funzione di modifica definita PRIMA di utilizzare, risolto il mio problema. Grazie.

— Kamlesh il

28

Per selezionare un'opzione, utilizzare .val('value-of-the-option')sull'elemento select. Per attivare l'elemento di modifica, utilizzare .change()o .trigger('change').

I problemi nel tuo codice sono la virgola anziché il punto in $('.check'),trigger('change');e il fatto che lo chiami prima di associare il gestore eventi.

— ThiefMaster
fonte

10

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

Sarebbe cambiare il select tag html elemento discesa con id="edit_user_details".

— Sohail xIN3N
fonte

7

Un'altra soluzione funzionante per coloro che sono stati bloccati con il gestore di trigger jQuery, che l'attivazione del dosaggio su eventi nativi sarà come di seguito (funzionante al 100%):

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

— Mohamed23gharbi
fonte

1

Ho provato tutto quanto sopra, ma solo questo funziona per me. Penso, perché la mia selezione era dentro vue. Grazie @ Mohamed23gharbi!

— Tillito,

1

Anch'io. Questa è la soluzione che stavo cercando da un'ora. Grazie.

— mberna

1

Questa deve essere la risposta!

— MARS

1

Fornisci collegamenti in valore del tag opzione

<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
fonte

1

Se si desidera eseguire alcuni controlli, utilizzare in questo modo

 <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
fonte

0

Basato sulla risposta di 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");
}

Nel mio caso, dove gli elementi sono stati creati da Vue, questo è l'unico modo che funziona.

— Tillito
fonte

0

Puoi provare sotto il codice per risolvere il tuo problema:

Per impostazione predefinita, prima opzione selezionare: jQuery ('. Selezionare'). Find ('opzione') [0] .selected = true;

Grazie, Ketan T

— Ketan Tambekar
fonte