Como pegar o valor do select antes de mudar com JavaScript

Neste artigo você vai aprender a como pegar o valor do select antes de mudar, utilizando a linguagem JavaScript para isso.

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Quando se trabalha com formulários em HTML, um elemento comum é o elemento select, que permite ao usuário selecionar uma opção de uma lista pré-determinada.

Às vezes, pode ser necessário pegar o valor do select antes de o usuário mudar sua seleção.

Isso pode ser útil em vários cenários, como quando se deseja exibir informações relevantes com base na opção selecionada ou quando se deseja validar a seleção do usuário antes de permitir que ele a mude.

Neste artigo, exploraremos como pegar o valor do select antes de mudar usando JavaScript. Mas antes de mergulharmos em como fazer isso, vamos entender melhor como o elemento select funciona.

O elemento select em HTML

O elemento select é usado em HTML para criar uma lista suspensa de opções que o usuário pode escolher.

Ele é criado usando a tag <select> e contém um ou mais elementos <option> dentro dele, que representam as opções da lista. Cada <option> pode ter um valor atribuído a ele usando o atributo “value”.

Aqui está um exemplo simples de um elemento select:

<select id="meuSelect">
  <option value="opcao1">Opção 1</option>
  <option value="opcao2">Opção 2</option>
  <option value="opcao3">Opção 3</option>
</select>

Neste exemplo, o select contém três opções com valores “opcao1”, “opcao2” e “opcao3”, respectivamente.

Agora que sabemos como o elemento select funciona em HTML, vamos ver como podemos pegar o valor atual do select antes de o usuário mudar sua seleção usando JavaScript.

Pegando o valor atual do select antes de mudar com JavaScript

Para pegar o valor atual do select antes de o usuário mudar sua seleção, precisamos usar o evento onchange do select.

Esse evento é acionado sempre que o valor selecionado do select é alterado.

Podemos adicionar um ouvinte de evento onchange ao select usando JavaScript e, em seguida, acessar o valor atual do select dentro do manipulador de evento.

Veja como podemos fazer isso:

const meuSelect = document.getElementById("meuSelect");

meuSelect.addEventListener("change", function() {
  const valorAtual = this.value;
  console.log("Valor atual: " + valorAtual);
});

Neste exemplo, primeiro obtemos uma referência ao elemento select usando o método getElementById.

Em seguida, adicionamos um ouvinte de evento onchange ao select usando o método addEventListener.

Dentro do manipulador de evento, usamos a palavra-chave “this” para se referir ao select e acessar seu valor atual usando a propriedade “value”.

Finalmente, imprimimos o valor atual no console usando o método console.log.

Observe que o valor atual do select é acessado dentro do manipulador de evento onchange, que é acionado apenas quando o valor do select é alterado.

Portanto, sempre que o usuário alterar a seleção do select, o valor atual será impresso no console.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em resumo, neste artigo vimos como pegar o valor do select antes de mudar usando JavaScript.

Para isso, usamos o evento onchange do select e um ouvinte de evento para acessar o valor atual do select dentro do manipulador de evento.

Isso pode ser útil em diversos cenários, como exibir informações relevantes com base na seleção do usuário ou validar a seleção antes de permitir que o usuário a mude.

Saber como pegar o valor atual do select é uma habilidade importante para qualquer desenvolvedor front-end que trabalhe com formulários em HTML e JavaScript.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!