 |
|
||||
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: 16852 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:
<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);
Neste exemplo nós usamos a técnica de fornecer o tratador de evento (event handler) onchange como um atributo do elemento select: <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:
<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>
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 |
|
PHP - Como obter o caminho da raiz do site usando a variável global $_SERVER['DOCUMENT_ROOT'] do PHP |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
