Inércia Sensorial

Select dinâmico

Comments 8 dAmerica/Los_Angeles October, 2005 sob Javascript.
Tags:

No dia 03/09/2005, publiquei uma introdução ao Ajax. Como dei uma rápida passada nos assuntos principais, como DOM e o XMLHttpRequest, resolvi que era a hora de mostrar mais exemplos práticos, de situações corriqueiras ou interessantes, onde você pode usar Ajax e a biblioteca CPAINT.

Então, vou ensinar como mudar os valores de um <select>, também chamado de combobox ou menu drop-down. E em um próximo artigo, como esses valores podem ser trocados por um retorno XML do Ajax.

Em essência, trocar os valores de um <select> exige apenas um loop sobre uma matriz de Javascript. No próprio aplicativo no servidor, poderíamos construir essa lista pegando valores no banco de dados e mostrando dentro do <head> do documento. Entretanto, vamos imaginar que essa lista mudaria com outras ações do usuário na página, por exemplo, uma seleção de itens para um carrinho de compras. Assim, não iríamos querer a página inteira sendo recarregada.

Como mudar um <select>

Em Javascript, a matriz retornada por document.forms[formulario][select_nome].options consegue acessar as opções do <select>. A primeira opção está localizada em document.forms[formulario][select_nome].options[0], e a segunda está em document.forms[formulario][select_nome].options[1] e assim sucessivamente.

Para especificar um valor, usamos new Option();, que aceita dois argumentos. O primeiro é texto da opção, e o segundo (opcional), o valor dela.

Então, se quisessemos colocar duas opções em um <select> chamado exemplo de um formulário chamado formulario, faríamos:

PLAIN TEXT

JavaScript:

document.forms[formulario][exemplo].options[0] = new Option("Primeira opção", 1);
document.forms[formulario][exemplo].options[1] = new Option("Segunda opção", 2);

Em HTML, isso é o equivalente de usarmos:

PLAIN TEXT

HTML:

<select name="exemplo">
<option value="1">Primeira opção</option>
<option value="2">Segunda opção</option>
</select>

Deixe-me mostrá-lo um exemplo completo, com dois botões do tipo radio. O primeiro, quando clicado, mudará o valor do <select> para números, e o segundo, para o cardinal.

PLAIN TEXT

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select dinâmico</title>
<script type="text/javascript">
numero_lista = new Array("1", "2", "3");
cardinal_lista = new Array("Primeiro", "Segundo", "Terceiro");
function trocarSelect(formulario_nome, select_nome, lista_nome)
{
if (lista_nome == "numero") {
var lista = numero_lista;
} else {
var lista = cardinal_lista;
}
var select_alvo = document.forms[formulario_nome][select_nome];
select_alvo.options.length = 0;
for (i = 0; i <lista.length; i++) {
var nome_opcao = lista[i];
select_alvo.options[i] = new Option(nome_opcao);
}
}
</script>
</script></head>
<body>
<form name="formulario_de_exemplo" method="post" action="exemplo.php">
<p>
Transforme o select em <input type="radio" name="exemplo" value="numero" onClick="trocarSelect('formulario_de_exemplo', 'selecao', 'numero');" /> número ou em <input type="radio" name="exemplo" value="cardinal" onClick="trocarSelect('formulario_de_exemplo', 'selecao', 'cardinal');" /> cardinal.
<br />
<select name="selecao">
<option value="vazio">Clique em um botão radio qualquer</option>
</select>
</p>
</form>
</body>
</html>

Em breve, publicarei outro artigo sobre montar a matriz de novos valores para o <select> com o XML retornado pelo Ajax.

Levi

Nessa operação eu posso ter como resultado do select 1, 2, 3 ou primeiro, segundo, terceiro.
Como faço para gravar no banco de dados o resultado que eu selecionar?