Esta é uma solução bem simples que visa interagir duas combobox. Ao clicar em um determinado ítem da primeira, você tem determinadas opções na segunda. Segue o código:
Código html : (salve como combobox.html)
<html>
<head>
<title>Combobox dinâmica</title>
</head>
<body>
<form name="form1">
<select name="categoria" onChange="redirect(this.options.selectedIndex)">
<option name="vazio" value=""></option>
<option value="fruta" name="fruta">Fruta</option>
<option value="verdura" name="verdura">Verdura</option>
<option value="fritura" name="fritura">Fritura</option>
</select>
<select name="atributo">
<option value="0">selecione uma categoria</option>
</select>
<script language="JavaScript" src="dinamico.js"></script>
</form>
</body>
</html>
e o java script: (salve como dinamico.js)
//recebe do formulario a categoria selecionada
var groups=document.form1.categoria.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
// se categoria na linha 2 entao opções de atributo são esses (posição 1 = 2 linha. posição 0 = 1)
group[1][0]=new Option("Abacaxi")
group[1][1]=new Option("Mamao")
group[1][2]=new Option("laranja")
group[1][3]=new Option("manga")
group[1][4]=new Option("acerola")
//se categoria na linha 3 entao opções de atributo são esses
group[2][0]=new Option("Repolho")
group[2][1]=new Option("Alface")
group[2][2]=new Option("Cebola")
group[2][3]=new Option("Beterraba")
group[3][0]=new Option("Pastel")
group[3][1]=new Option("Batata frita")
group[3][2]=new Option("bolinho de chuva")
group[3][3]=new Option("bolinho de arros")
// armazena os atributos correspondentes a categoria no select e name=atributo
var temp=document.form1.atributo
function redirect(x){
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
Valeu pessoal, espero que tenha ajudado. Aplicado desta forma é útil pra quem não tem necessidade de criar um banco de dados.
0 comentários:
Postar um comentário