Acionar evento de alteração <select> usando jquery

146

existe alguma maneira eu poderia desencadear um evento de mudança na caixa de seleção no carregamento da página e selecione uma opção específica.

Além disso, a função é executada adicionando o gatilho após vincular a função ao evento.

Eu estava tentando algo saída como esta

<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

você deseja definir uma opção específica no carregamento? ou você deseja acionar seu evento de alteração?

— Manse

Você poderia expandir a solução final. Você está tentando ter uma opção forçada quando a página é carregada ou seleciona uma opção diferente quando algo específico é selecionado?

— Matthew Riches

oi, obrigado pelo seu feedback, eu fui capaz de resolver o problema e o documentei.

— Kishanio

288

Use val()para alterar o valor (não o texto) e trigger()disparar manualmente o evento.

O manipulador de eventos de mudança deve ser declarado antes do gatilho.

Aqui está uma amostra

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

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

— Joseph
fonte

Também depois de alterar a opção, eu queria executar a função de evento de alteração. escrevi isso . caixa de alerta deve ser executada.

— Kishanio

@KishanThobhani, você deve chamar isso depois de adicionar o manipulador. veja a amostra.

— Joseph

7

A parte importante desta solução é: O manipulador de eventos de mudança DEVE ser declarado ANTES do gatilho (faz sentido ...); no meu caso, esse era o problema, obrigado!

— Larzan

Ajudou como Salvador, obrigado @Joseph

— Divya

função de mudança definida ANTES de usar, resolveu meu problema. Obrigado.

— precisa

28

Para selecionar uma opção, use .val('value-of-the-option')no elemento selecionar. Para acionar o elemento de alteração, use .change()ou .trigger('change').

Os problemas no seu código são a vírgula em vez do ponto $('.check'),trigger('change');e o fato de você chamá-lo antes de vincular o manipulador de eventos.

— ThiefMaster
fonte

10

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

Ele mudaria o item suspenso da tag html selecionadaid="edit_user_details" .

— Sohail xIN3N
fonte

7

Outra solução de trabalho para aqueles que foram bloqueados com o manipulador de gatilhos jQuery, que disparou doses em eventos nativos será como abaixo (100% funcionando):

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

— Mohamed23gharbi
fonte

1

Eu tentei tudo o que precede, mas apenas este funciona para mim. Eu acho, porque meu select estava dentro do vue. Obrigado @ Mohamed23gharbi!

— Tillito

1

O mesmo aqui. Esta é a solução que estou procurando há uma hora. Obrigado.

— mberna

1

Isso precisa ser a resposta!

— MARS

1

Forneça links no valor da tag de opção

<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 você quiser fazer algumas verificações, use desta maneira

 <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

Com base na resposta 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");
}

No meu caso, onde os elementos foram criados pelo vue, essa é a única maneira que funciona.

— Tillito
fonte

0

Você pode tentar o código abaixo para resolver seu problema:

Por padrão, a primeira opção seleciona: jQuery ('. Select'). Find ('option') [0] .selected = true;

Obrigado, Ketan T

— Ketan Tambekar
fonte