Ir para conteúdo
Fórum Script Brasil
  • 0

Atualizar Combo!

Guest BJack

Perguntado por Guest BJack,

 Share

Pergunta

Guest BJack

Guest BJack

Postado
Postado

E ai galera!!

Seguinte, tenho uma página onde há um combo "tipo alguma coisa" e de acordo com o q eu selecionar vou carregar meu segundo combo na mesma pagina de subtipo!! Como selecionar um estado e de acordo com o estado vou carregar outro combo com as cidades do estado!

Alguém poderia me ajudar a implementar isso?!

Não sei se isso ajuda mas minha tela é jsp e uso o framework struts!! Talvez a combinação dessas tecnologias possa ajudar!!

Vlws!!

T+

Link para o comentário
Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

  • 0
André Gusmão

André Gusmão

Postado
Postado

Bom, no meu forum tem JSP mas como lá tá um marasmo, ninguém acessa, nem vale a pena postar lá, hehehehe...

É o seguinte: o ideal seria você preencher dinamicamente o combo de cidade em um processo server-side, no caso, através de uma recarga na página JSP ou através de Servlet.

Mas se são poucas cidades que você quer listar para cada estado, então até vale a pena fazer em javascript. Ficaria mais ou menos assim:

<script>

var cidades = new Array();

cidades['SP']= new Array('São Paulo','Guarulhos','São Caetano');

cidades['RJ'] = new Array('Rio de Janeiro','Parati','Nova Iguaçi');

function carregaCidade(estado)

{

    document.all.cidade.options.length = 0;

    for(var i in cidades[estado])

    {

        var opt = new Option(cidades[estado],cidades[estado]);

        document.all.cidade.options.add(opt);

    }

}

</script>

<body onLoad="carregaCidade(document.all.estado.value)">

<select name="estado" onChange="carregaCidade(this.value)">

<option value="SP">São Paulo</option>

<option value="RJ">Rio de Janeiro</option>

</select>

<select name="cidade"></select>

</body>

Link para o comentário
Compartilhar em outros sites
  • 0
Gladisson

Gladisson

Postado
Postado

Tem como fazer pra o segundo select abrir o o select 3

O 1º select = Vemelho

O 2º select = Azul

O 3º select = Verde

                  SP

                  |_ _ _ São Paulo

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

                  |_ _ _ Guarulhos

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

                  |_ _ _ São Caetano

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

                  |               

                  RJ

                  |_ _ _ Rio de Janeiro

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

                  |_ _ _ Parati

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

                  |_ _ _ Nova Iguaçi

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |                |_ _ _ _ _ _ _ _  bairro X

                  |               

                  |               

Não vou fazer com o exemplo dado não, sei que vou ficar perdido na hora de colocar os bairros, e ainda mais eu não ia terminar nunca.

Pô to precisando disso.

Link para o comentário
Compartilhar em outros sites
  • 0
diraol

diraol

Postado
Postado

tem como fazer sim... é só usar a mesma lógica do anterior..... você vai duplicar a lógica.................esse é o cód. normal...

<script>

var cidades = new Array();

cidades['SP']= new Array('São Paulo','Guarulhos','São Caetano');

cidades['RJ'] = new Array('Rio de Janeiro','Parati','Nova Iguaçi');

function carregaCidade(estado)

{

    document.all.cidade.options.length = 0;

    for(var i in cidades[estado])

    {

        var opt = new Option(cidades[estado],cidades[estado]);

        document.all.cidade.options.add(opt);

    }

}

</script>

<body onLoad=carregaCidade(document.all.estado.value)">

<select name="estado" onChange="carregaCidade(this.value)">

<option value="SP">São Paulo</option>

<option value="RJ">Rio de Janeiro</option>

</select>

<select name="cidade"></select>

</body>

ai faz mais ou menos assim......aonde tem cidade você coloca bairro.... no array você tira o nome das cidades ('São Paulo','Guarulhos','São Caetano'); e coloca o nome dos bairros.............

<script>

var cidades = new Array();

cidades['SP]= new Array('São Paulo','Guarulhos','São Caetano');

cidades['RJ'] = new Array('Rio de Janeiro','Parati','Nova Iguaçi');

function carregaCidade(estado)

{

    document.all.cidade.options.length = 0;

    for(var i in cidades[estado])

    {

        var opt = new Option(cidades[estado],cidades[estado]);

        document.all.cidade.options.add(opt);

    }

}

</script>

e ai fica assim........

<select name="estado" onChange="carregaCidade(this.value)">

<option value="SP">São Paulo</option>

<option value="RJ">Rio de Janeiro</option>

</select>

<select name="cidade" onChange="carregaBairro(this.value)"></select>

<select name="bairro"></select>

tenta ai... :D

Link para o comentário
Compartilhar em outros sites
  • 0
Guest [ URSOLOUCO ]

Guest [ URSOLOUCO ]

Postado
Postado

Brother´s !!

Na propria script brasil, area de javascript, achei o seguinte script:

<!-- --><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 Abstraction</option>
<option value="http://www.news.com">News.com</option>
<option value="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[i]=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[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>

</form><!-- -->

Muda os valores e Id´s para seu site.

Funciona bem pra xuxu.

Abraços!!!

Link para o comentário
Compartilhar em outros sites
  • 0
ursolouco

ursolouco

Postado
Postado

Ufa!!

Parou aqui. O suporte esta D+.

Acho que a solução, ou uma delas, é esta aqui:

Fonte: http://javascriptkit.com/

Link!!!

Script:

<FORM name="isc">

<table border="0" cellspacing="0" cellpadding="0">

  <tr align="center">

    <td nowrap height="11"> &nbsp;

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

<option selected>---Select1-------------</option>

<option>Webmaster Sites</option>

<option>News Sites</option>

</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">

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

<option value=" " selected>---Select2--------------</option>

<option value=" " selected>---Select2--------------</option>

</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">

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

<option value=" " selected>---Select3----------------</option>

<option value=" " selected>---Select3----------------</option>

</select>

<script>

<!--

/*

Triple Combo Script Credit

By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)

Visit http://javascriptkit.com for this and over 400+ other scripts

*/

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

var group=new Array(groups)

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

group=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");

group[1][1]=new Option("JavaScript","47");

group[1][2]=new Option("DHTML","46");

group[1][3]=new Option("CGI","45");

group[2][0]=new Option("Now Select This One"," ");

group[2][1]=new Option("General News","115");

group[2][2]=new Option("Technology News","116");

var temp=document.isc.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

redirect1(0)

}

var secondGroups=document.isc.stage2.options.length

var secondGroup=new Array(groups)

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

secondGroup=new Array(group.length)

for (j=0; j<group.length; j++)  {

secondGroup[j]=new Array()  }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");

secondGroup[1][0][0]=new Option("---Select 3---"," ");

secondGroup[1][1][0]=new Option("Now Select This One"," ");

secondGroup[1][1][1]=new Option("JavaScript Kit","http://javascriptkit.com");

secondGroup[1][1][2]=new Option("JavaScript for the non programmer","http://webteacher.com/javascript/");

secondGroup[1][1][3]=new Option("Java-Scripts.net","http://java-scripts.net");

secondGroup[1][2][0]=new Option("Now Select This One"," ");

secondGroup[1][2][1]=new Option("Dynamic Drive","http://www.dynamicdrive.com");

secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML","http://www.geocities.com/ResearchTriangle/Facility/4490/");

secondGroup[1][2][3]=new Option("Web Coder","http://webcoder.com/");

secondGroup[1][3][0]=new Option("Now Select This One"," ");

secondGroup[1][3][1]=new Option("CGI Resources","http://www.cgi-resources.com");

secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI","http://adashimar.hypermart.net/");

secondGroup[2][0][0]=new Option("---Select 3---"," ");

secondGroup[2][1][0]=new Option("Now Select This One"," ");

secondGroup[2][1][1]=new Option("CNN","http://www.cnn.com");

secondGroup[2][1][2]=new Option("MSNBC","http://www.msnbc.com");

secondGroup[2][1][3]=new Option("ABC News","http://www.abcnews.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");

secondGroup[2][2][1]=new Option("News.com","http://www.news.com");

secondGroup[2][2][2]=new Option("Wired","http://www.wired.com");

var temp1=document.isc.stage3

function redirect1(y){

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

temp1.options[m]=null

for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){

temp1.options=new Option(secondGroup[document.isc.example.options.selectedIndex][y].text,secondGroup[document.isc.example.options.selectedIndex][y].value)

}

temp1.options[0].selected=true

}

function redirect2(z){

window.location=temp1[z].value

}

//-->

</script>

  </td>

  </tr>

</table>

</FORM>

<p><font face="arial" size="-2">This free script provided by</font><br>

<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript

Kit</a></font></p>

Veja se pode ajudar em algo.

Já vou avisando.. não sei nada de javascript, só realizei uma pesquisa Google.

Abraços e Boa Sorte!!!

Link para o comentário
Compartilhar em outros sites
  • 0
diraol

diraol

Postado
Postado

poxa gladisson... não gostou da minha idéia né??/

beleza então!!! não ajudo mais!!!!!!

hehehehe...

brincadeira.... realmente, agora q eu fui ver e é muito mais complexo do q eu imaginei...hehehe

tipo.... a minha idéia eu mandei hj as 6 e poco da manhã....

num tinha acordado ainda...hehehe

num sei nem o q eu tava fazendo aki na net uma hora dessas... mas beleza....hehehehe

sem problemas...... estamos aqui para tentar ajudar, a melhor solução é a que vale....

ae barara.... tipo, to meio ocupado, mas assim que der eu vejo se consigo isso pra você.. claro... se ninguém mandar antes...hehhehe

falou

Link para o comentário
Compartilhar em outros sites
  • 0
ursolouco

ursolouco

Postado
Postado
Beleza, do jeito que eu queria, obrigado Urso. 

Diraol, eu tentei fazer usando a lógica, mais vi que não era simples assim, por isso que resolvi pedi ajuda novamente.

Brother!!!

Que isso! você me deixa encabulado :rolleyes:

Eu andei procurando durante o atendimento de alguns clientes, e quando os meninos reiniciavam o micro, eu pá, fazia uma navegação instantanea atrás da repostas pros camaradas.

Bom é isso Rapaziada... Boa Programação

Abraços e até a proxima!!!

[eu não sei nada de javascript, mas tá valendo]

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,7k
×
×
  • Criar Novo...