Combos Com Dhtml

Boas pessoal,

Estou com um probleminha aqui que estou tentando solucionar. Eu tenho uma página com 2 combos que eu preciso necessariamente fazer com javascript, pq o cliente não quer request na página.

O esquema é aquele de selecionar na primeira combo um valor, e na segunda combo listar os elementos de um array da opção do primeiro combo. Escolhendo a segunda opção do primeiro combo, preencher o segundo combo com os valores de um array referente a segunda opção.

Os elementos dos arrays eu vou buscar diretodo banco, mas a seleção de opção e a alteração na segunda combo, tem que ser por meio de DHTML.

Por padrão, o primeiro combo deve ser marcado com a primeira opção e o segundo combo deverá listar os elementos dele.

Alguem pode dar uma luz?

E aí, td bem?

Olha só.. Só esperamos que as combos das quais vc está falando não sejam, por exemplo, de Estados brasileiros na primeira combo e as cidades brasileiras na segunda. Hehehehe... Seriam dois dias carregando a página. : )

Mas vamos à solução...

Se os dados vêm do banco, uma idéia (existem várias formas, estou sugerindo uma) é vc carregá-los da seguinte forma:

<script language=JavaScript>
combo1=new Array('conjunto1','conjunto2','conjunto3');
combo2[0]=new Array('dado11','dado12','dado13','dado14');
combo2[1]=new Array('dado21','dado22','dado23');
combo2[2]=new Array('dado31','dado32','dado33','dado34','dado35');
</script>

Desta forma, a variável combo1 possui todos os itens que estarão na primeira combo. Na variável combo2, cada índice será o conteúdo da segunda combo para cada item da combo1. Ou seja... O índice 0 da variável combo2 representa os dados do item "conjunto1" da combo1, o índice 1 da variável combo2 representa os dados do item "conjunto2" da combo1, e assim por diante. Isto é o que você deve imprimir de acordo com o que vier do banco. Terá que ser implementado pelo PHP ou pelo ASP, ou pela linguagem que você tiver usando para buscar do banco.

Agora vou te explicar um pequeno detalhe... Existem duas formas de se mudar os dados de uma combo dinamicamente. Uma é suportada por todos os navegadores, outra não. A não suportada por todos os navegadores é você criar um OPTION dinamicamente. Algo como select.newOption() (não é assim, mas só pra explicar a gente escreve assim). Isto não funciona no Netscape, por exemplo. Então vamos ao outro jeito, que pra mim é o jeito mais burro, mas não tem outra saída. Vamos criar um DIV e vamos alocar dinamicamente a segunda combo ali dentro. Ok? No código que descreverei agora, já, inclusive, carregarei a primeira combo com os dados da variável combo1. Vamos lá...

<body onLoad=muda(0)>
<select name=c1 onChange=muda(this.value)>
<script language=JavaScript>
for(var i=0;i<combo1.length;i++)
document.write('<option value='+i+'>'+combo1[i]+'\n');
</script>
</select>

<div id=div2></div>
</body>

Repare o seguinte... Na combo1, já falei que assim que selecionarmos alguma opção nela, a função muda() será chamada informando o número da opção foi usada. E ao carregar a página, chamamos a mesma função informando que a opção da combo1 selecionada é a de número ZERO (índice zero da variável combo2). Agora vamos definir a função muda():

function muda(x) {

var htm='<select name=c2>';
for(var i=0;i<combo2[x].length;i++) htm+='<option value='+i+'>'+combo2[x][i]+'\n';
htm+='</select>';
document.all.div2.innerHTML=htm;

}

O código completo deste exemplo é o seguinte:

<html><head><title>Teste</title>
<script language=JavaScript>
combo1=new Array('conjunto1','conjunto2','conjunto3');
combo2[0]=new Array('dado11','dado12','dado13','dado14');
combo2[1]=new Array('dado21','dado22','dado23');
combo2[2]=new Array('dado31','dado32','dado33','dado34','dado35');

function muda(x) {

    var htm='<select name=c2>';
    for(var i=0;i<combo2[x].length;i++) htm+='<option value='+i+'>'+combo2[i]+'\n';
    htm+='</select>';
    document.all.div2.innerHTML=htm;

}
</script>
</head>
<body onLoad=muda(0)>
<select name=c1 onChange=muda(this.value)>
<script language=JavaScript>
for(var i=0;i<combo1.length;i++)
document.write('<option value='+i+'>'+combo1[i]+'\n');
</script>
</select>

<div id=div2></div>
</body>

Espero ter ajudado!

Um abraço,
Thales Medeiros.

#1 Lengrat

#2 Thales Medeiros

#3 lila...

0 user(s) are reading this topic

Combos Com Dhtml

#1 Lengrat

#2 Thales Medeiros

#3 lila...

0 user(s) are reading this topic

Entrar