 |
|
|
|
Você está aqui: JavaScript ::: Elementos de Formulários HTML ::: select Element/Object |
Como usar o evento onchange para detectar a mudança de seleção de item no elemento HTML selectQuantidade de visualizações: 16999 vezes |
|
Em algumas situações gostaríamos de detectar a mudança de seleção de item em um elemento HTML do tipo select. Isso pode ser feito por meio do evento onchange, que é disparado sempre que o usuário usa o mouse ou o teclado para selecionar um novo item no controle select. Veja uma página HTML contendo um elemento HTML select. Quando o usuário mudar a seleção de item nós exibiremos o texto e o valor da opção selecionada: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
// Função personalizada que é chamada sempre que
// houver uma mudança de item no elemento select
// Note que a função recebe, como argumento, o elemento
// select no qual o evento onchange foi disparado
function mudancaSelecao(elemento){
// vamos obter a opção selecionada
var selecionada = elemento.options[elemento.options.selectedIndex];
// vamos exibir o texto da opção selecionada
window.alert("Texto da opção: " + selecionada.text);
// vamos exibir o valor da opção selecionada
window.alert("Valor da opção: " + selecionada.value);
}
</script>
</head>
<body>
<form name="form1">
<select name="cidades" id="cidades" onchange="mudancaSelecao(this)">
<option value="5" selected="selected">Goiânia</option>
<option value="2">São Paulo</option>
<option value="7">Cuiabá</option>
</select>
</form>
</body>
</html>
Neste exemplo nós usamos a técnica de fornecer o tratador de evento (event handler) onchange como um atributo do elemento select: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <select name="cidades" id="cidades" onchange="mudancaSelecao(this)"> O valor this fornecido como argumento para a função mudancaSelecao() indica que uma referência ao elemento select, no qual a mudança de item ocorreu, está sendo passada para a função. Veja uma modificação do exemplo anterior, desta vez usando as funções addEventListener() e attachEvent() para atrelar ao elemento select a função a ser disparada quando o evento onchange ocorrer: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
// Função personalizada que é chamada sempre que
// houver uma mudança de item no elemento select
function mudancaSelecao(elem){
// vamos obter a opção selecionada
var selecionada = elem.options[elem.options.selectedIndex];
// vamos exibir o texto da opção selecionada
window.alert("Texto da opção: " + selecionada.text);
// vamos exibir o valor da opção selecionada
window.alert("Valor da opção: " + selecionada.value);
}
</script>
</head>
<body>
<form name="form1">
<select name="cidades" id="cidades">
<option value="5" selected="selected">Goiânia</option>
<option value="2">São Paulo</option>
<option value="7">Cuiabá</option>
</select>
</form>
<script type="text/javascript">
// vamos atribuir uma chamada à função mudancaSelecao() ao
// evento onchange do elemento select com o id "cidades"
var elemento = document.getElementById("cidades");
if(elemento.addEventListener){ // Firefox, Google Chrome, Safari, Opera
elemento.addEventListener("change", new
Function("mudancaSelecao(elemento)"), false);
}
else if(elemento.attachEvent){ // Internet Explorer, Opera
elemento.attachEvent('onchange', new Function("mudancaSelecao(elemento)"));
}
</script>
</body>
</html>
Veja que neste exemplo precisei fazer um teste de browser, visto que o IE não suporta a função addEventListener(). Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
JavaScript - Como exibir apenas dois dígitos após o ponto decimal em JavaScript usando a função toFixed() do objeto Number |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
