Combobox Dinamico Sem Bd

[ICtusweb]

Saudações galera.

Alguém poderia me ajudar a construir um Combobox que mude suas opções de acordo com o que foi escolhido anteriormente num outro?

Só que não quero usar banco de dados.

Exemplo:

O primeiro combo tem os seguintes valores:

Opção A

Opção B

Opção C

O segundo combo teria os valores 1,2,3,4 de acordo com o que fosse escolhido no primeiro.

Tipo:

Se a opção escolhida no primerio fosse "Opção A" então eu quero que o segundo combo exiba somente os valores 1 e 2.

Se a opção escolhida no primerio fosse "Opção B" então eu quero que o segundo combo exiba somente os valores 1 a 3e por ai vai.

Antecipadamente..Brigadão galera!!

[olimpia]

você terá que fazer um script que verifique o evento de seleção do primeiro combo, sendo assim você limpa todo o conteúdo do segundo combo e adiciona somente os itens referente a seleção do primeiro combo

Procure aqui no forum sobre o assunto "select"

[ICtusweb]

Veja, esto usando esta função que encontrei aqui mesmo no forum, mas tá acontecendo o seguinte:

Eu pus o script ants da tag <form> e o IE diz que 'temp' não é um ojeto valido o mesmo com a variavel 'groups' mesmo pondo o script dentro da tag <form>.

Porém essa mesma função incluindo o form exemplo, abaixo do meu form ela funciona perfeitametne. Não to entendendo!!!

Pra você entender melhor vou por as duas, a original(que peguei aqui) e ela do jeito que preciso.

Meu form:

<!-- --><form name="Meuform">

<p><select name="Combo01" size="1" onChange="redirect(this.options.selectedIndex)">

<option>Tipo A Sites</option>

<option>Tipo B</option>

<option>Tipo C</option>

</select>

<select name="Combo02" size="1">

<option value="0">selected="selected"></option>

</select>

A função modificada:

<script>

<!--

var groups=document.Meuform.Quantidade.options.length

var group=new Array(groups)

for (i=0; i<groups; i++)

group=new Array()

group[0][0]=new Option("1")

group[0][1]=new Option("1")

group[0][2]=new Option("2")

group[0][1]=new Option("1")

group[0][1]=new Option("2")

group[0][2]=new Option("3")

var temp=document.Meuform.Combo02

function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<group[x].length;i++){

temp.options=new Option(group[x].text,group[x].value)

}

temp.options[0].selected=true

}

//-->

</script>

</form><!-- -->

Script completo original do jeito que peguei no forum:

<!-- --><form name="doublecombo">

<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">

<option>Technology Sites</option>

<option>News Sites</option>

<option>Search Engines</option>

</select>

<select name="stage2" size="1">

<option value="http://wsabstract.com">Website'>http://wsabstract.com">Website Abstraction</option>

<option value="http://www.news.com">News.com</option>'>http://www.news.com">News.com</option>

<option value="http://www.wired.com">Wired'>http://www.wired.com">Wired News</option>

</select>

<input type="button" name="test" value="Go!"

onClick="go()">

</p>

<script>

<!--

/*

Double Combo Script Credit

By Website Abstraction (www.wsabstract.com)

Over 200+ free JavaScripts here!

*/

var groups=document.doublecombo.example.options.length

var group=new Array(groups)

for (i=0; i<groups; i++)

group=new Array()

group[0][0]=new Option("Website Abstraction","http://wsabstract.com")

group[0][1]=new Option("News.com","http://www.news.com")

group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")

group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")

group[2][1]=new Option("Infoseek","http://www.infoseek.com")

group[2][2]=new Option("Excite","http://www.excite.com")

group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<group[x].length;i++){

temp.options=new Option(group[x].text,group[x].value)

}

temp.options[0].selected=true

}

function go(){

location=temp.options[temp.selectedIndex].value

}

//-->

</script>

</form><!-- -->

Me ajuda aÊ!!!?? achoq fiqeui bitolado e não to conseguindo achar o problema

[ICtusweb]

na linha que define os valores pra o array groups[0] considere [1] e [2] respectivamente,ao invés de apenas [0]. já corrigi aqui, mas o resultado é o mesmo (lógico).

[babaloricha]

de onde saio a quantidade?

vou testar esse seu codigo mas essa quantidade e suspeita <_<

[babaloricha]

hhaaa eu num disse!!!

fuciono certinho assim o!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form name="Meuform">
<select name="Combo01" size="1" onChange="redirect(this.options.selectedIndex)">
<option>unidade</option>
<option>dezena</option>
<option>centena</option>
</select>
<select name="Combo02" size="1">
<option value="0">selected="selected"></option>
</select>

<script>
<!--
var groups=document.Meuform.Combo01.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("1")
group[0][1]=new Option("2")
group[0][2]=new Option("3")

group[1][0]=new Option("10")
group[1][1]=new Option("20")
group[1][2]=new Option("30")

group[2][0]=new Option("100")
group[2][1]=new Option("200")
group[2][2]=new Option("300")

var temp=document.Meuform.Combo02

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
}

//-->
</script>
</form>


</body>
</html>

testa ai! ;)

[ICtusweb]

valeu bahiano.rsss na verdade quando vim ver sua resposta já tinha conseguido. Ms valeu..

Agora to sem saber (porque conheço muito pouco a linguagem), é tornar a função genérica. Tipo eu tenho vários Combos.O primeiro combo chama "tipo01" o segundo "Tipo02" e sucessivamnte.. o mesmo para os combos que serão modificados dinamicamente.. "Quantidade01", "Quatidade02"...

Dá uma idéia do que mandar pra função pra só fazer ela uma vez?!

[ICtusweb]

Na verdade eu so preciso passar pra variavel 'temp' o nome do combo que vai receber os valores do array group..que serão os mesmos para todos.

var temp=document.Meuform.Combo02(o nome do Combo eu passo quando chamar a função), mas como? não descobri ainda..rss. Ajuda aÊ!?

a que o nome do Combo vai mudar a cada chamada(Combo01, Combo02..etc..)

[babaloricha]

opa disculpa a demora no caso nome do combo seria o indice dele na array né

Eu to usando o que você coloco pra fazer um formulario, por falar nisso obrigado o como está ficando!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form name="Meuform">
<select name="Combo01" size="1" onChange="redirect(this.options.selectedIndex)">
<option value="Marca">Marca</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Asia">Asia</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Crysler">Crysler</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">DaeWoo</option>
<option value="Dodge">Dodge</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai</option>
<option value="Jaguar">Jaguar</option>
<option value="JPX">JPX</option>
<option value="Kia">Kia</option>
<option value="Land Hover">Land Hover</option>
<option value="Lexus">Lexus</option>
<option value="Maserati">Maserati</option>
<option value="Mercedes-Bens">Mercedes-Bens</option>
<option value="Nissan">Nissan</option>
<option value="Peugiot">Peugiot</option>
<option value="Pontiac">Pontiac</option>
<option value="Porche">Porsche</option>
<option value="Renault">Renault</option>
<option value="Seat">Seat</option>
<option value="Subaru">Subaru</option>
<option value="Suzuki">Suzuki</option>
<option value="Toyota">Toyota</option>
<option value="Troller">Troller</option>
<option value="Volkswagem">Volkswagem</option>
<option value="Volvo">Volvo</option>
</select>
<select name="Combo02" size="1">
<option value="0">selected="selected"></option>
</select>

<script language="javascript">
<!--
var groups=document.Meuform.Combo01.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("Modelo")

group[1][0]=new Option("145")
group[1][1]=new Option("147","147")
group[1][2]=new Option("155","155")
group[1][3]=new Option("156","156")
group[1][4]=new Option("164","164")
group[1][5]=new Option("1750","1750")
group[1][6]=new Option("2300B","2300B")
group[1][7]=new Option("2300SL","2300SL")
group[1][8]=new Option("2300Ti","2300Ti")
group[1][9]=new Option("2300Ti4","2300Ti4")
group[1][10]=new Option("Giulieta","Giulieta")
group[1][11]=new Option("Spider","Spider")

group[2][0]=new Option("AM 825","AM 825")
group[2][1]=new Option("Galloper","Galloper")
group[2][2]=new Option("HI-Topic","HI-Topic")
group[2][3]=new Option("Rocsta","Rocsta")
group[2][4]=new Option("Topic","Topic")
group[2][5]=new Option("Towner","Towner")

group[3][0]=new Option("100","100")
group[3][1]=new Option("80","80")
group[3][2]=new Option("A2","A2")
group[3][3]=new Option("A3","A3")
group[3][4]=new Option("A4","A4")
group[3][5]=new Option("A6","A6")
group[3][6]=new Option("A8","A8")
group[3][7]=new Option("All Road","All Road")
group[3][8]=new Option("Avant","Avant")
group[3][9]=new Option("Q7 fsi","Q7 fsi")
group[3][10]=new Option("RS2","RS2")
group[3][11]=new Option("RS4","RS4")
group[3][12]=new Option("RS6","RS6")
group[3][13]=new Option("S3","S3")
group[3][14]=new Option("S4","S4")
group[3][15]=new Option("S6","S6")
group[3][16]=new Option("S8","S8")
group[3][17]=new Option("TT","TT")

group[4][0]=new Option("120i","120i")
group[4][1]=new Option("130i","130i")
group[4][2]=new Option("316i","316i")
group[4][3]=new Option("318i","318i")
group[4][4]=new Option("318iA","318iA")
group[4][5]=new Option("318iS","318iS")
group[4][6]=new Option("318i S/A","318i S/A")
group[4][7]=new Option("318Ti","318Ti")
group[4][8]=new Option("318TiA","318TiA")
group[4][9]=new Option("320i","320i")
group[4][10]=new Option("320iA","320iA")
group[4][11]=new Option("323Ci","323Ci")
group[4][12]=new Option("323CiA","323CiA")
group[4][13]=new Option("323i","323i")
group[4][14]=new Option("323i/A","323i/A")
group[4][15]=new Option("323iA","323iA")
group[4][16]=new Option("323Ti","323Ti")
group[4][17]=new Option("325i","325i")
group[4][18]=new Option("325iA","325iA")
group[4][19]=new Option("328i","328i")
group[4][20]=new Option("328iA","328iA")
group[4][21]=new Option("330Ci","330Ci")
group[4][22]=new Option("330Cia","330Cia")
group[4][23]=new Option("330i","330i")
group[4][24]=new Option("330iA","330iA")
group[4][25]=new Option("520i","520i")
group[4][26]=new Option("525i","525i")
group[4][27]=new Option("525iA","525iA")
group[4][28]=new Option("528i","528i")
group[4][29]=new Option("528iA","528iA")
group[4][30]=new Option("528iL","528iL")
group[4][31]=new Option("530i","530i")
group[4][32]=new Option("530iA","530iA")
group[4][33]=new Option("535i","535i")
group[4][34]=new Option("540i","540i")
group[4][35]=new Option("540iA","540iA")
group[4][36]=new Option("540iTA","540iTA")
group[4][37]=new Option("545i","545i")
group[4][38]=new Option("550i","550i")
group[4][39]=new Option("550iA","550iA")
group[4][40]=new Option("635Csi","635Csi")
group[4][41]=new Option("645Ci","645Ci")
group[4][42]=new Option("650","650")
group[4][43]=new Option("730","730")
group[4][44]=new Option("730i","730i")
group[4][45]=new Option("735i","735i")
group[4][46]=new Option("740i","740i")
group[4][47]=new Option("740iA","740iA")
group[4][48]=new Option("745iA","745iA")
group[4][49]=new Option("750i","750i")
group[4][50]=new Option("750iA","750iA")
group[4][51]=new Option("760iL","760iL")
group[4][52]=new Option("760Li","760Li")
group[4][53]=new Option("840ci","840ci")
group[4][54]=new Option("840CiA","840CiA")
group[4][55]=new Option("850ci","850ci")
group[4][56]=new Option("850Csi","850Csi")
group[4][57]=new Option("850i","850i")
group[4][58]=new Option("M3","M3")
group[4][59]=new Option("M5","M5")
group[4][60]=new Option("M6","M6")
group[4][61]=new Option("X3","X3")
group[4][62]=new Option("X5","X5")
group[4][63]=new Option("Zi","Zi")
group[4][64]=new Option("Z2","Z2")
group[4][65]=new Option("Z3","Z3")
group[4][66]=new Option("Z4","Z4")
group[4][67]=new Option("Z5","Z5")
group[4][68]=new Option("Z8","Z8")


group[5][0]=new Option("Astra","Astra")
group[5][1]=new Option("Astrovan","Astrovan")
group[5][2]=new Option("Blaser","Blaser")
group[5][3]=new Option("Camaro","Camaro")
group[5][4]=new Option("Caprice","Caprice")
group[5][5]=new Option("Celta","Celta")
group[5][6]=new Option("Classic","Classic")
group[5][7]=new Option("Corsa","Corsa")
group[5][8]=new Option("Corvete","Corvete")
group[5][9]=new Option("D10","D10")
group[5][10]=new Option("D15","D15")
group[5][11]=new Option("D20","D20")
group[5][12]=new Option("D40","D40")
group[5][13]=new Option("Gran Blaser","Gran Blaser")
group[5][14]=new Option("Impala","Impala")
group[5][15]=new Option("International","International")
group[5][16]=new Option("Ipanema","Ipanema")
group[5][17]=new Option("Life 1.0","Life 1.0")
group[5][18]=new Option("Lumina","Lumina")
group[5][19]=new Option("Meriva","Meriva")
group[5][20]=new Option("Montana","Montana")
group[5][21]=new Option("Omega","Omega")
group[5][22]=new Option("Pickup","Pickup")
group[5][23]=new Option("Prisma","Prisma")
group[5][24]=new Option("S10","S10")
group[5][25]=new Option("S10 4x4","S10 4x4")
group[5][26]=new Option("Saturn","Saturn")
group[5][27]=new Option("Silverado","Silverado")
group[5][28]=new Option("Space Van","Space Van")
group[5][29]=new Option("Sport Van","Sport Van")
group[5][30]=new Option("SS","SS")
group[5][31]=new Option("SSR","SSR")
group[5][32]=new Option("Suburban","Suburban")
group[5][33]=new Option("Suprema","Suprema")
group[5][34]=new Option("Syclone","Syclone")
group[5][35]=new Option("Tigra","Tigra")
group[5][36]=new Option("Tracker","Tracker")
group[5][37]=new Option("Trafic","Trafic")
group[5][38]=new Option("Vectra","Vectra")
group[5][39]=new Option("Zafira","Zafira")

group[6][0]=new Option("300C","300C")
group[6][1]=new Option("300M","300M")
group[6][2]=new Option("Caravan","Caravan")
group[6][3]=new Option("Cirrus","Cirrus")
group[6][4]=new Option("Concorde","Concorde")
group[6][5]=new Option("De Soto","De Soto")
group[6][6]=new Option("Grand Caravan","Grand Caravan")
group[6][7]=new Option("Le Baron","Le Baron")
group[6][8]=new Option("Neon","Neon")
group[6][9]=new Option("Pacifica","Pacifica")
group[6][10]=new Option("Pt-Cruiser","Pt-Cruiser")
group[6][11]=new Option("Sebring","Sebring")
group[6][12]=new Option("Stratus","Stratus")
group[6][13]=new Option("Town e Country","Town e Country")
group[6][14]=new Option("Vision","Vision")
group[6][15]=new Option("Voyager","Voyager")

group[7][0]=new Option("3CV","3CV")
group[7][1]=new Option("AX","AX")
group[7][2]=new Option("Berlingo","Berlingo")
group[7][3]=new Option("BX","BX")
group[7][4]=new Option("C3","C3")
group[7][5]=new Option("C4","C4")
group[7][6]=new Option("C5","C5")
group[7][7]=new Option("Evasion","Evasion")
group[7][8]=new Option("Jumper","Jumper")
group[7][9]=new Option("Xantia","Xantia")
group[7][10]=new Option("Xm","Xm")
group[7][11]=new Option("Xsara","Xsara")
group[7][12]=new Option("Xsara Picasso","Xsara Picasso")
group[7][13]=new Option("Zx","Zx")

group[8][0]=new Option("Espero","Espero")
group[8][1]=new Option("Lanos","Lanos")
group[8][2]=new Option("Leganza","Leganza")
group[8][3]=new Option("Nubira","Nubira")
group[8][4]=new Option("Prince","Prince")
group[8][5]=new Option("Racer","Racer")
group[8][6]=new Option("Super Salon","Super Salon")
group[8][7]=new Option("Tico","Tico")

group[9][0]=new Option("Avenger","Avenger")
group[9][1]=new Option("Charger","Charger")
group[9][2]=new Option("Dakota","Dakota")
group[9][3]=new Option("Dart","Dart")
group[9][4]=new Option("Purango","Purango")
group[9][5]=new Option("Intrepd","Intrepd")
group[9][6]=new Option("Le Baron","Le Baron")
group[9][7]=new Option("Magnum","Magnum")
group[9][8]=new Option("Magnum RT Hemi","Magnum RT Hemi")
group[9][9]=new Option("Polaka","Polaka")
group[9][10]=new Option("Ram","Ram")
group[9][11]=new Option("Stealth","Stealth")
group[9][12]=new Option("Viper","Viper")

group[10][0]=new Option("348","348")
group[10][1]=new Option("612","612")
group[10][2]=new Option("Dino 246 GT","Dino 246 GT")
group[10][3]=new Option("F355 Fi","F355 Fi")
group[10][4]=new Option("F360","F360")
group[10][5]=new Option("F40","F40")
group[10][6]=new Option("F400","F400")
group[10][7]=new Option("F456","F456")
group[10][8]=new Option("F50","F50")
group[10][9]=new Option("F512m","F512m")
group[10][10]=new Option("F550","F550")
group[10][11]=new Option("F575","F575")

group[11][0]=new Option("Brava","Brava")
group[11][1]=new Option("Coupe","Coupe")
group[11][2]=new Option("Doblo","Doblo")
group[11][3]=new Option("Elba","Elba")
group[11][4]=new Option("Fiorino","Fiorino")
group[11][5]=new Option("Idea","Idea")
group[11][6]=new Option("Marea","Marea")
group[11][7]=new Option("Mille","Mille")
group[11][8]=new Option("Palio","Palio")
group[11][9]=new Option("Punto","Punto")
group[11][10]=new Option("Siena","Siena")
group[11][11]=new Option("Stilo","Stilo")
group[11][12]=new Option("Strada","Strada")
group[11][13]=new Option("Tempra","Tempra")
group[11][14]=new Option("Tipo","Tipo")

group[12][0]=new Option("Aspire","Aspire")
group[12][1]=new Option("Cobra","Cobra")
group[12][2]=new Option("Ecosport","Ecosport")
group[12][3]=new Option("Escort","Escort")
group[12][4]=new Option("Explorer","Explorer")
group[12][5]=new Option("Explorer xlt","Explorer xlt")
group[12][6]=new Option("F-1","F-1")
group[12][7]=new Option("F-100","F-100")
group[12][8]=new Option("F-1000","F-1000")
group[12][9]=new Option("F-150","F-150")
group[12][10]=new Option("F-250","F-250")
group[12][11]=new Option("F-350","F-350")
group[12][12]=new Option("Fiesta","Fiesta")
group[12][13]=new Option("Focus","Focus")
group[12][14]=new Option("Fusion","Fusion")
group[12][15]=new Option("Galaxie","Galaxie")
group[12][16]=new Option("Ibiza","Ibiza")
group[12][17]=new Option("Ka","Ka")
group[12][18]=new Option("Ka mp3","Ka mp3")
group[12][19]=new Option("Mondeo","Mondeo")
group[12][20]=new Option("Mustang","Mustang")
group[12][21]=new Option("Ranger","Ranger")

group[13][0]=new Option("Accord","Accord")
group[13][1]=new Option("Civic","Civic")
group[13][2]=new Option("CRV","CRV")
group[13][3]=new Option("FIT","FIT")
group[13][4]=new Option("Lengend","Legend")
group[13][5]=new Option("Odyssey","Odyssey")
group[13][6]=new Option("Passport","Passport")
group[13][7]=new Option("Prelude","Prelude")

var temp=document.Meuform.Combo02


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
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
}

//-->
</script>
</form>
</body>
</html>

não sei se isso pode te ajuda manda um email pra min com seu site e o que você quer fazer, ai talvez eu possa te ajudar

joaojok@hotmail.com (MSN) :D