Jump to content
Fórum Script Brasil
  • 0

Combobox Dinamico Sem Bd


ICtusweb
 Share

Question

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!!

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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"

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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! ;)

Link to comment
Share on other sites

  • 0

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?!

Link to comment
Share on other sites

  • 0

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..)

Link to comment
Share on other sites

  • 0

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

[email protected] (MSN) :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649k
×
×
  • Create New...