5

Como eu faço para que toda vez que escolher uma opção ele dispare um evento. No exemplo abaixo ele já está com o Um selecionado. Eu queria que mesmo que eu escolha ele novamente ele dispare sem ter que trocar entre um e outro

$('select').on('change', function() {
  alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

3 Respostas 3

3

É possível escutar o evento de click no select, mas esse evento é disparado antes de selecionar qualquer opção. Se quiser colocar para que seja feito algo assim que o usuário acabar de escolher uma opção, mesmo que seja a anterior ou até mesmo um clique fora do select, pode utilizar o script abaixo:

let gatilho;
$(document).click(function(){
  if (gatilho){
    gatilho=false;
    alert( $('select').val() ) //colocar aqui sua ação;
  }
});

$('select').click(function(e) {
  e.stopPropagation();
  if (gatilho) {
    alert( $(this).val() ) //colocar aqui sua ação;
    gatilho=false;
  } else {
    gatilho=true;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

3
  • No primeiro exemplo, quando troca de opção, os dois eventos são disparados, mostrando o alerta duas vezes. Commented 15/10/2018 às 20:38
  • Verdade @JorgeMatheus, melhor colocar a ação a ser tomada no próprio srcript sem ter que disparar outro evento. Alterei a resposta. Commented 15/10/2018 às 20:42
  • Agora está ok! +1 Commented 15/10/2018 às 20:45
2

É bem simples fazer esta ação, vou explicar resumidamente como funciona os eventos relacionados ao mouse, ex:click ou change. Sempre que usar um evento JQuery o próprio framework coloca no callback function(event) um objeto com todos os métodos e parâmetros que você pode trabalhar. Um objeto que você pode usar é o chamado timeStamp, ele te retorna quanto tempo o evento demorou, quando você clica em um objeto na tela o framework gasta um tempo para identificar os dados do objeto, mas depois de carregado, quando seu combobox está aberto, o click gasta 0 segundos porque o JQuery ja leu os dados anteriormente. Não sei se conseguiu entender bem mas depois de carregado, basta verificar se o timestamp é 0, aí vc pode pegar o dados clicado. Veja o exemplo funcionando abaixo.

$(function() {
        $('#dados').click(function(event) {
            if (event.timeStamp == 0) {
                var dados = $(this).val();
                alert(dados);

            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dados">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Espero ter ajudado.

5
  • Porque você utilizou $(function() { no começo da função sendo que apenas escutando o click no #dados funciona? Já vi muita gente fazendo isso mas não sei porque... Commented 17/10/2018 às 0:36
  • 1
    Já descobri aqui: stackoverflow.com/questions/7642442. Commented 17/10/2018 às 1:31
  • 1
    Laércio blz? sobre o $(function(){ o Framework entende que todo o documento da página foi carregado e aí depois disso ele executa essa função mostrando estar preparado para enchergar todos os componentes da tela. é muito importante você usar ele para garantir que a página inteira estará carregada. Commented 17/10/2018 às 13:40
  • Obrigado Cleiton, depois de pesquisar descobri que é um atalho para $(document).ready( function() { }). Commented 17/10/2018 às 13:59
  • Obrigado pela ajuda Cleyton! Commented 20/10/2018 às 2:03
1

Várias formas, eis umas delas

var valorAntigo = null;
$('select').click(function(){
  s = $(this);
  val = s.val();
  if (valorAntigo == null) {
      valorAntigo = val;
  } else {
      valorAntigo == s.val() ? alert('mesmo option valor = '+ this.value) : alert('outro option valor = '+ this.value);
      valorAntigo = null;      
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

OU

$(function () {
    var cc = 0;
    $('select').click(function () {        
        cc++;
        if (cc == 2) {
            $(this).change();
            cc = 0;
        }         
    }).change (function () {
        alert(this.value);
        cc = -1;
    });      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .