Inércia Sensorial

08 de October de 2005

Select dinâmico

Filed under: Javascript — inerte @ 14:49

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:

1
2
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:

1
2
3
4
<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
< !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.

3 Comments »

  1. 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?

    Comment by Levi — 31 de May de 2009 @ 07:05

  2. Como faço para carregar no evento onload.

    Comment by Osvaldop4 — 11 de August de 2011 @ 14:38

  3. Como faço para carregar no evento onload.

    Comment by Osvaldop4 — 11 de August de 2011 @ 14:38

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress