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:
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:
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.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Select dinâmico
Em breve, publicarei outro artigo sobre montar a matriz de novos valores para o <select> com o XML retornado pelo Ajax.
Leave a Reply
You must be logged in to post a comment.