Obtenha o valor da opção seleccionada da lista Drop-Down em JavaScript
Em JavaScript, trabalhar ou controlar as interações do usuário, como cliques do mouse ou teclas do teclado, é um desafio. Graças aos eventos JavaScript, é mais fácil para nós acompanhar as interações do usuário e obter os valores atualizados depois que os usuários na página da web fazem algumas alterações.
Por exemplo, se houver um menu drop-down e você tiver que selecionar uma opção da lista de todas as outras opções, eis o que aconteceria: você pode obter facilmente o valor da opção que selecionou no menu drop-down lista com a ajuda de eventos click do mouse.
Você verá como implementar isso em detalhes ao ler este artigo.
Obtenha a opção selecionada em uma lista usando eventos de mouse em JavaScript
Os eventos em JavaScript são uma ótima maneira de acompanhar as interações do usuário na página da web, como cliques do mouse ou eventos de clique do teclado. Existem vários eventos disponíveis em JavaScript, uma lista completa dos quais pode ser encontrada aqui. De todos esses eventos, nos concentraremos apenas na discussão do evento clique do mouse.
Sempre que os usuários clicarem em qualquer uma das opções presentes na lista drop-down, nosso evento clique do mouse será acionado. Com esse recurso, podemos obter facilmente o valor da opção selecionada no menu drop-down.
Vamos agora ver como funciona durante a execução.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
A seguir está o código JavaScript.
function myFunction() {
let elem = document.querySelectorAll('.drop-down');
elem.forEach(element => {
element.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
})
}
myFunction();
Produção:
test2
test3
test1
Observe que a saída irá variar dependendo de qual opção foi selecionada pelo usuário no menu drop-down.
Dentro de nosso HTML, temos uma tag select com um id de list, que será usada para criar uma lista drop-down. Neste caso, existem três opções dentro da tag select, cada uma das quais tem um nome de classe de drop-down. E no final, estamos vinculando o código JavaScript no final da tag body, uma vez que está presente em um arquivo separado.
Dentro do JavaScript, temos uma função chamada myFunction(). Aqui, primeiro obtemos todos os elementos de opção da lista drop-down usando o nome da classe drop-down usando a propriedade querySelectorAll. Este processo retornará um array contendo todas as opções da lista drop-down. Então, vamos armazenar este array dentro de uma variável chamada elem.
Agora que temos todas as opções armazenadas na variável elem, usaremos um loop for each nessa variável. O loop for each nos ajudará a obter os elementos individuais do array, portanto, podemos agora adicionar ouvintes de evento a cada um desses elementos de opção do array.
Os elementos individuais dentro do array podem ser acessados com a variável element, passada como um argumento para o loop for each. Para adicionar um evento a elemento, temos que usar um método fornecido por JavaScript chamado addEventListener(), que leva dois argumentos.
O primeiro argumento é o evento click e o segundo argumento é a função callback. O evento click diz ao navegador para executar a função callback apenas quando um usuário clica (botão esquerdo do mouse) em qualquer uma das opções do menu drop-down. A própria função callback recebe um argumento denominado e ou evento que nos ajudará a obter o elemento que o utilizador seleciona.
Na função callback, você pode escrever o código que quiser. Como queremos obter o valor da opção selecionada neste caso, usaremos e.target. Este comando informará qual elemento HTML está sendo selecionado no momento.
Finalmente, para obter o valor dessa opção selecionada, podemos usar e.target.innerHTML e passá-lo dentro do método console.log() para ver a saída na janela do console.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn