Vamos conhecer um dos truques mais solicitados de Javascript, que tem muita relação com o tema de formulários e onde se utiliza o evento onchange de Javascript. É um exemplo sobre como realizar uma página com dois selects onde, segundo o valor escolhido em um deles, mudem as opções possíveis do outro select.

O melhor para ver o que vamos fazer é ver uma página web onde se mostra em funcionamento o script. Para ver seu funcionamento, devemos mudar a seleção do primeiro select e comprovaremos como as opções do segundo select mudam automaticamente.

O exemplo que ilustramos utiliza estados e países. Ao escolher no primeiro select um país, no segundo deve nos mostrar os estados desse país para que possamos escolher um estado, mas somente um que esteja no país selecionado no primeiro término.

Conhecer o objeto select e os option

É importante conhecer os objetos de formulário select e os option. Os select correspondem com as caixas de seleção desdobráveis e os option com cada uma das opções da caixa desdobrável. Podemos ver um artigo que fala sobre isso.

Teoricamente nos interessa fazer várias coisas que têm a ver com extrair o valor de um select em qualquer momento, observar seu número de opções e, para cada opção, colocar seu valor e seu texto associado. Tudo isto aprenderemos a fazer neste exemplo.

Referência: Para conhecer o trabalho e a hierarquia de objetos javascript (Tudo isso é a base do trabalho com os elementos das páginas em Javascript) devemos ler o manual de Javascript II.

Modo de solucionar o problema

Para começar, vamos utilizar um formulário com dois selects, um para o país e outro para o estado.

<form name="f1">
<select name=pais onchange="muda_estado()">
<option value="0" selected>Selecione...
<option value="1">Espanha
<option value="2">Brasil
<option value="3">Portugal
<option value="4">França
</select>

<select name=estado>
<option value="-">-
</select>
</form>

Observamos no select associado ao país deste formulário que, quando se muda a opção de país, deve-se chamar a função muda_estado(). Veremos mais adiante esta função, agora é importante observar que está associada ao evento onchange que se ativa quando muda a opção no select.

Todo o resto será código Javascript. Começamos definindo um montão de de arrays com os estados de cada país. Neste caso temos só 4 países, então necessitaremos 4 arrays. Em cada array tenho uma lista de estados de cada país, colocados em cada um dos elementos do array. Ademais, deixaremos o primeiro campo com um valor "-" que indica que não foi selecionado nenhum estado.

var estados_1=new Array("-","Andalucía","Asturias","Baleares","Canarias","Castilla y León","Castilla-La Mancha","...")
var estados_2=new Array("-","Rio de Janeiro","Bahia","São Paulo","Santa Catarina","Minas Gerais","...")
var estados_3=new Array("-","Algarve","Alentejo","Norte","Vale do Tejo","...")
var estados_4=new Array("-","Aisne","Creuse","Dordogne","Essonne","Gironde ","...")

Observemos que os índices do array de cada país se correspondem com os do select do país. Por exemplo, a opção Espanha, tem o valor associado 1 e o array com os estados de Espanha se chama estados_1.

O script se completa com uma função que realiza o carregamento dos estados no segundo select. O mecanismo realiza basicamente estas ações:

• Detecto o país que foi selecionado
• Se o valor do país não for 0 (o valor 0 é quando não foi selecionado nenhum país)
  • Tomo o array de estados adequado, utilizando o índice do país.
  • Marco o número de opções que deve ter o select de estados
  • Para cada opção do select, coloco seu valor e texto associado, que faz corresponder com o indicado no array de estados.
• SE NÃO (O valor de país é 0, não foi selecionado país)
  • Coloco no select de estado um único option com o valor "-", que significava que não havia estado.
• Coloco a opção primeira do select de estado como o selecionado.

A função tem o seguinte código. Está comentado para que se entenda melhor.

function muda_estado(){
    //tomo o valor do select do pais escolhido
    var pais
    pais = document.f1.pais[document.f1.pais.selectedIndex].value
    /vejo se o pais está definido
    if (pais != 0) {
       //se estava definido, entao coloco as opcoes do estado correspondente.
       //seleciono o array de estado adequado
       meus_estados=eval("estados_" + pais)
       //calculo o numero de estados
       num_esatdos = meus_estados.length
       //marco o número de estados no select
       document.f1.estado.length = num_estados
       //para cada estado do array, o introduzo no select
       for(i=0;i<num_estados;i++){
          document.f1.estado.options[i].value=meus_estados[i]
          document.f1.provincia.options[i].text=meus_estados[i]
       }
    }else{
       //se não havia estado selecionado, elimino os estados do select
       document.f1.estado.length = 1
       //coloco um traço na única opção que deixei
       document.f1.estado.options[0].value = "-"
       document.f1.estado.options[0].text = "-"
    }
    //marco como selecionada a opção primeira de estado
    document.f1.estado.options[0].selected = true
}

Podemos ver uma página com o exemplo em funcionamento.