2

Bom dia gostaria de saber se é possível fazer isso dentro do Jquery:

$(document).ready(function() {
  $("select").change(teste());
  
  function teste() {
    alert($("select").val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

aparentemente ele consegue chamar o evento no momento da execução, porém ao alterar o valor do select não.

4
  • Qual resultado pretendes obter? Explique melhor. Commented 10/03/2020 às 11:23
  • 1
    use $("select").change(teste); ao invés de $("select").change(teste());.
    – Benilson
    Commented 10/03/2020 às 11:23
  • Deu certo Benilson, mas e se caso eu quiser enviar um parâmentro para minha função, como eu faria? por exemplo: $("select").change(teste('par1')); Commented 10/03/2020 às 11:26
  • Usa uma função anônima recebendo o parâmetro e executando internamente teste(parametro).
    – Benilson
    Commented 10/03/2020 às 11:28

3 Respostas 3

3

Problema

Quando você faz isso:

$("select").change(teste());

Você executa o "teste()" e passa para a função "change" o retorno de teste, assim o evento "change" não faz nada.

Solução

Passando somente "teste" você passa de fato a função para "change".

$(document).ready(function() {
  $("select").change(teste);
  
  function teste() {
    alert($("select").val());
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

4
  • e como faria para passar um parâmetro para a função teste? Commented 10/03/2020 às 11:38
  • Não da para personalizar o parâmetro, você pode ver na documentação que o único parâmetro é "Event", ou seja, você tem que trabalhar com isso, e la dentro você pode chamar outra função ou fazer como você fez selecionando o próprio elemento. Commented 10/03/2020 às 11:42
  • 1
    @WictorChaves é possível sim. A própria documentação diz como. Elaborei uma resposta pra complementar. Tmj
    – LipESprY
    Commented 10/03/2020 às 11:50
  • 1
    @LipESprY Massa! Vivendo e aprendendo +1 Commented 10/03/2020 às 11:51
2

É possível sim. Veja o que diz a documentação do método change do jQuery.

Exemplo #1 - passando o nome da função:

function teste(ev){
    alert($("select").val());
}

$(document).ready(function() {
    $("select").change(teste); // aqui passo o nome da função a ser executada
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Exemplo #2 - função anônima:

$(document).ready(function() {
    $("select").change(function(ev){ // pode ser arrow function também: (ev) => alert($("select").val());
        alert($("select").val());
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Exemplo #3 - passando dados específicos para a função:

$(document).ready(function() {
    $("select").change(
        'Você selecionou o valor: ', // aqui eu defino o que quero passar pra função
        (ev) => alert(ev.data+$("select").val())  // com ev.data eu recupero o que passei por argumento
    );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="1">valor 1</option>
    <option value="2">valor 2</option>
    <option value="3">valor 3</option>
</select>

Observe que passe a string 'Você selecionou o valor: ' que poderia ser qualquer outro tipo, como um objeto, por exemplo...

1

Pode fazer desta forma, passando o evento para uma função não-anônima junto com parâmetros:

$(document).ready(function() {
  $("select").change("param", teste);
  
  function teste(event) {
    console.log("Valor selecionado:", $("select").val());
    console.log("Parâmetro:", event.data);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</option>
</select>

O parâmetro é passado na propriedade .data do evento, que poderia ser também um array ou um objeto:

$(document).ready(function() {
  $("select").change(['a','b'], teste);
  
  function teste(event) {
    console.log("Valor selecionado:", $("select").val());
    console.log("Parâmetro em forma de array:", event.data);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">valor 1</option>
  <option value="2">valor 2</option>
  <option value="3">valor 3</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 .