 |
|
||||
Você está aqui: JavaScript ::: Elementos de Formulários HTML ::: select Element/Object |
Como adicionar novas opções (elementos option) a um elemento select usando o método add() da coleção optionsQuantidade de visualizações: 11473 vezes |
O método add() da coleção options (que gerencia todos os elementos option de um elemento select) é usado quando queremos inserir novas opções no elemento HTML select. Veja sua assinatura:object.add(oElement [, iIndex]) Aqui object é o elemento select no qual adicionaremos a nova opção, oElement é o novo elemento option e iIndex indica a posição que o elemento será inserido. Se este valor for omitido, a nova opção é inserida no final da lista. Antes de adicionar um novo elemento option ao elemento select, devemos criá-lo por meio do método createElement() do objeto document. Veja um exemplo completo mostrando como isso pode ser feito:
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function adicionarOpcoesSelect(){
// vamos obter o elemento select que receberá as novas opções
var elem = document.getElementById("cidades");
// o elemento select foi encontrado?
if(elem != null){
// vamos adicionar a cidade "Cuiabá" com o valor 12
// no final da lista
var cidade = document.createElement("option");
cidade.text = "Cuiabá";
cidade.value = "12";
elem.options.add(cidade);
// vamos agora adicionar "Curitiba" depois da primeira opção
cidade = document.createElement("option");
cidade.text = "Curitiba";
cidade.value = "25";
elem.options.add(cidade, 1);
}
else{
window.alert("O elemento select não foi encontrado.");
}
}
function obterOpcaoSelecionada(){
// vamos obter a opção selecionada
var elem = document.getElementById("cidades");
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>
</select>
</form>
<button onclick="adicionarOpcoesSelect()">
Adicionar Novas Opções no Select</button><br>
<button onclick="obterOpcaoSelecionada()">
Obter Opção Selecionada</button>
</body>
</html>
Este exemplo apresenta dois botões. Ao clicar no primeiro botão duas novas opções serão adicionadas ao elemento select. Ao clicar no segundo botão nós conseguimos obter o texto e valor da opção selecionada. Esta dica foi testada no Internet Explorer (IE 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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
