Ajax e DHTML

Vou explicar um pouco de como trabalhar com elementos SELECT do HTML de forma inâmica e com conteúdo atualizavel via AJAX.
Para isso é necessário que se tenha uma combo. Abaixo segue um exemplo em HTML:

<select name="cmbteste" id="cmbteste">
  <optgroup label="Grupo 1">
  <option>teste1</option>
  <option>teste2</option>
  <option>teste3</option>
  <option>teste4</option>
  </optgroup>
</select>

Esse combo fica assim:


teste1
teste2


teste3
teste4


O Elemento <optgroup></optgroup> gera um grupo dentro do combo. Para o elemento SELECT existem as seguintes propriedades diferentes dos demais:
Size: define o numero de elementos que irão aparecer, como nesse exemplo que foi informado com a propriedade size = 2:

teste1
teste2

Multiple: define se pode ser selecionado mais de um elemento. Exemplo: multiple="multiple"

teste1
teste2
teste3
teste4

Para selecionar mantenha pressionada a tecla CTRL e clique nos elementos
Vamos agora a um exemplo de uso da combo, mas de forma dinâmica. Vou criar 2 funções que farão a atualização da combo, uma vai enviar os dados via AJAX e outra vai receber o retorno da solicitação:

function Cidades(estado){
   url = "http://localhost/buscacidade.php";
   pars = "estado=" + estado;
   var myAjax = new Ajax.Request( url, {method: 'post',
    parameters: pars,
    onComplete: retCidade});
}

function retCidade(or1){
   total = $("cmbcidade").length;
   for(i=0;i<total;i++){
      $("cmbcidade").remove(0);
   }

   if (or1.responseText == ""){
      $("cmbcidade").options.add(
        new Option("Nada encontrado",0));
   }else{
      eval(or1.responseText);
      for(i=0;i<cidade.length;i++){
         $("cmbcidade").options.add(
           new Option(cidade[i].Nome,cidade[i].ID));
      }
   }
}

A função Cidade(estado) recebe como paramêtro o estado que ele realizará a consulta, fazendo essa pelo método Ajax.Request que já conhecemos de outro tutorial.
Fazemos 2 eventos na função retCidade(or1), a primeira é limpar a combo. Para isso é necessário fazer um loop que varra todos os elementos e os remova.

total = $("cmbcidade").length;
   for(i=0;i<total;i++){
      $("cmbcidade").remove(0);
   }

O método remove(index) do elemento select faz com que o item com index informado no parametro seja removido. Depois o que fazemos é transformar o retorno (caso haja retorno) em linguagem JavaScript com a função eval():

eval(or1.responseText);

Por fim incluimos um item utilizando o método add da collection options do elemento select. Complexo? É não, olha abaixo:

$("cmbcidade").options.add(
           new Option(cidade[i].Nome,cidade[i].ID));

Isso funcionaria também sem a ajuda da prototype:

document.forms[0].cmbcidade.options.add(
           new Option(cidade[i].Nome,cidade[i].ID));

Só para finalizar, esse é o código PHP:

<?
header("Content-type: text/html; charset=ISO-8859-1");
switch ($_REQUEST["estado"]){
  case "SP":
    cidades("Araraquara,Araras,Americana,Judiaí,Santos,
              São Carlos,São Paulo");
    break;
  case "RJ":
    cidades("Rio de Janeiro,Parati,Angra dos Reis");
    break;
  case "PR":
    cidades("Curitiba,Camboriú");
    break;
  case "SC":
    cidades("Florianópolis,Blumenau");
    break;
  case "RS":
    cidades("Porto Alegre,Gramado,Canela,Caxias do Sul");
    break;
}
function cidades($par1){
  $city = split(",",$par1);
  if (count($city)==0)
    return;
  echo "var cidade = new Array();\n";
  for ($i=0;$i<count($city);$i++){
    echo "cidade[$i] = new Object();\n";
    echo "cidade[$i].Nome='".$city[$i]."';\n";
    echo "cidade[$i].ID='".$i."';\n";
  }
}
?>

Como resultado de tudo isso temos o seguinte exemplo: Exemplo 1