Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

ment0r

[Resolvido] Combobox cidade que popula combo bairro

Recommended Posts

Olá amigos do forum.

 

Seguinte... tenho dois <select>, um cidade e outro bairro. Queria que quando o usuário clicasse em cidade e escolhesse uma, automaticamente o <select> bairro seria populado pelos bairros que pertencem a essa cidade. Parece ser algum bem simples de se entender, mas pra implementar isso... ta complicado.

Obviamente os dados serão pegos de duas tabelas: cidade e bairro (Uso o Postgresql + PHP), mas nem com dados fixos estou conseguindo.

 

CREATE TABLE cidade
(
  id integer NOT NULL DEFAULT nextval('seq_cidade'::regclass), 
  nome character(128), 
  CONSTRAINT pk_cidade PRIMARY KEY (id)
)

CREATE TABLE bairro
(
  id integer NOT NULL DEFAULT nextval('seq_bairro'::regclass),
  nome character(128) NOT NULL, 
  id_cidade integer NOT NULL, 
  CONSTRAINT pk_bairro PRIMARY KEY (id),
  CONSTRAINT fk_cidade FOREIGN KEY (cidade) REFERENCES aprimorar.cidade (id) ON UPDATE CASCADE ON DELETE CASCADE,
)

 

Já peguei uns 10 exemplos com estados -> cidades, mas não consegui fazer as alterações para usar no meu sistema. Eram códigos gigantescos, com 3 ou 4 arquivos diferentes. A maioria usa Ajax, sei que não devia, mas sou leigo em Ajax :(

 

Um deles é mais facil e até tentei muda-lo para adaptar ao meu sistema. Segue o link do mesmo. Link do exemplo original. Creditos: "http://www.daviferreira.com"

 

O que eu gostaria de vocês é que me ajudassem a resolver esse problema ou então ajudar a mudar o exemplo que deixei no link acima, assim já serviria de base para eu continuar. Fiz as mudanças no exemplo, mas por algum errinho, alguma coisinha que deixei passar despercebido, não consigo finalizar.

 

No exemplo está: Pais(popula) -> Estado(popula) -> Cidades, no meu poderia ser Estado(popula) -> Cidade(popula) -> Bairro ou só Cidade(popula) -> Bairro

 

Agradeço desde já a todos.

Share this post


Link to post
Share on other sites

é que eu mudei de servidor, e ainda não tinha alterado os dados do banco.

 

http://www.wbruno.com.br/scripts/combos-dependentes.php

Share this post


Link to post
Share on other sites

William Bruno não consegui adaptar pro meu sistema. O exemplo seu está perfeito. Mudei os nomes dos select, tentei mudar a parte do banco, pois uso Postgres, mas não vai cara. Estou tento muita dificuldade para resolver.

 

Vou mostrar abaixo como ficou meu exemplo:

 

index.php

<html>  
<head>  
   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>  
   <script type="text/javascript">  
   $(document).ready(function(){//inicio o jQuery  
       $("select[name='cidade']").change(function(){  
       var idCombo1 = $(this).val();//pegando o value do option selecionado  
       //alert(idCombo1);//apenas para debugar a variável  

           $.getJSON(//esse método do jQuery, só envia GET  
               'combos-dependentes-function.inc.php',//script server-side que deverá retornar um objeto jSON  
               {idCombo1: idCombo1},//enviando a variável  

               function(data){  
               //alert(data);//apenas para debugar a variável  

                   var option = new Array();//resetando a variável  

                   resetaCombo('bairro');//resetando o combo  
                   $.each(data, function(i, obj){  

                       option[i] = document.createElement('option');//criando o option  
                       $( option[i] ).attr( {value : obj.id} );//colocando o value no option  
                       $( option[i] ).append( obj.nome );//colocando o 'label'  

                       $("select[name='bairro']").append( option[i] );//jogando um à um os options no próximo combo  
               });  
           });  
       });  
   });   

   /* função pronta para ser reaproveitada, caso queria adicionar mais combos dependentes */  
   function resetaCombo( el )  
   {  
       $("select[name='"+el+"']").empty();//retira os elementos antigos  
       var option = document.createElement('option');  
       $( option ).attr( {value : '0'} );  
       $( option ).append( 'Escolha' );  
       $("select[name='"+el+"']").append( option );  
   }  
   </script>  
</head>  
<body>  
<form action="" method="post">  
   <fieldset>  
       <label>
	<select name="cidade">
		<option value="">Escolha a cidade</option>';
           <?php 
		include "../estaticos/conexao.php";

		$cidade_select = "select * from cidade order by nome";
		$cidade_query = pg_query($conexao, $cidade_select);
		while($cidade_array = pg_fetch_array($cidade_query))
		{
			if($cidade_array["id"] == $id_cidade)
			{
				print"<option selected='selected' value='".trim($cidade_array["id"])."'>".utf8_decode(trim($cidade_array["nome"]))."</option>";
			}
			else
			{
				print"<option value='".trim($cidade_array["id"])."'>".utf8_decode(trim($cidade_array["nome"]))."</option>";
			}
		}
		print'</select>';
		?>


       <select name="bairro">  
           <option value="0">Escolha</option>  
       </select>

   </fieldset>  
</form>  
</body>  
</html>

Acho que o index.php deve estar correto. Nele só mudei combo1 para cidade, cambo2 para bairro, em todos os lugares.

 

function.inc.php

<?php  
   header("Content-Type: text/html; charset=ISO-8859-1");  
include "../estaticos/conexao.php";

   function intGet( $campo ){  
       return isset( $_GET[$campo] ) ? (int)$_GET[$campo] : 0;  
   }  
   function retorno( $id )  
   {
	include "../estaticos/conexao.php";

	$sql = "select id, nome, cidade from aprimorar.bairro where cidade = ".$id."";

	$q = pg_query($conexao, $sql);

	$total = pg_num_rows($q);

       $json = Array();  
       if( $total > 0 )  
       {  
           while($array = pg_fetch_array($q))  
           {  
               $json[] = Array('id'=> $array["id"], 'nome'=> utf8_decode($array["nome"]), 'cidade'=> $array["cidade"]);  
           }  
       }  
       else  
           $json[] = Array('id'=> utf8_encode( 'nao encontrado' ), 'id'=> '0' );  

       return json_encode( $json );  
   }  

   echo retorno( intGet('idCombo1') ); 

 

Aqui deve estar o problema, alguma coisa que estou fazendo errado nessa parte impede o funcionamento usando os dados das minhas tabelas [descritas no inicio do tópico].

 

Se você pudesse me ajudar com isso, eu ficaria realmente muito grato, nem que for só pra comentar o function.inc.php. Tenho muitas duvidas, como por exemplo: a variavel $id do function.inc.php é o "value" que vem do select cidade?. É a primeira vez que uso esse tipo de item nos meus sistemas e por isso estou tento muito dificuldade.

 

Desde já muito obrigado.

Share this post


Link to post
Share on other sites

acesse diretamente assim:

 

http://www.wbruno.com.br/scripts/combos-dependentes-function.inc.php?idCombo1=1

 

 

e faça aparecer um jSON parecido com esse meu. Modifique o php até retornar assim.

Share this post


Link to post
Share on other sites

William Bruno, primeiramente obrigado. No link que você passou aparece:

[{"nome":"1\u00b0 Item do Combo1","id":"1"},{"nome":"2\u00b0 Item do Combo1","id":"2"}]

 

Nos dois arquivos que eu coloquei no post #6 eu já havia mudado para poder usar no meu sistame. As cidades até aparecem, mas não os bairros, mudei tudo relacionalmente, mas não adiantou. O que recebe o value do combo cidade, que no caso seria o id da mesma?

 

Não sei também se o function.inc.php que eu mudei está certo. Não sou daqueles que querem "tudo de mão beijada", mas se você pudesse me ajudar nisso, eu seria muito grato. Só falta essa parte pra eu terminar o serviço rsrsr.

 

Obrigado desde já.

Share this post


Link to post
Share on other sites

exato, você deve acessar o teu arquivo diretamente e tb, aparecer algo parecido com isso ai.

Share this post


Link to post
Share on other sites

o problema é que o teu php não está trazendo dado nenhum.

 

debug a query e descubra o motivo

Share this post


Link to post
Share on other sites

William Bruno você até o momento é o único que se propôs a me ajudar até o momento, por isso sou muito grato. Muito obrigado.

 

Fiz alguns testes e percebi que o meu select não traz dados, pois o $id que serve de parametro para a busca é 0;

 

$sql = "select id, nome, cidade from aprimorar.bairro where cidade = ".$id."";

 

Esse $id seria o value do select cidade

 

...
print"<option value='".trim($cidade_array["id"])."'>".utf8_decode(trim($cidade_array["nome"]))."</option>";
...

 

Por que o valor dele é zero, uma vez que o select cidade tem valor no "value"?

 

Desde já obrigado.

 

<select name="cidade">
<option value="">Escolha a cidade</option>';
<option value='33'>Santo André</option>
<option value='34'>Santos</option>
</select>

 

E outra pergunta: é a escolha de uma cidade que chama o $(document).ready(function()...

Share this post


Link to post
Share on other sites

Por que o valor dele é zero, uma vez que o select cidade tem valor no "value"?

de acordo com o script acima, não deveria acontecer isso.

Como está agora ?

 

 

E outra pergunta: é a escolha de uma cidade que chama o $(document).ready(function()...

?? não entendi.

 

$(document).ready() é uma função q será disparada assim que o DOM carregar, no evento do browser, sem interação do usuario.

Share this post


Link to post
Share on other sites
de acordo com o script acima, não deveria acontecer isso.

Como está agora ?

Continua 0.

 

As mudanças que eu fiz que estão exibidas no post #6 estão corretas?

 

Obrigado.

Share this post


Link to post
Share on other sites

descomente este alert:

alert(idCombo1);//apenas para debugar a variável  

diga oq aparece.

Share this post


Link to post
Share on other sites
descomente este alert:

alert(idCombo1);//apenas para debugar a variável

diga oq aparece.

Aparece os números 33 ou 34 que são os ids das cidades. :D

Share this post


Link to post
Share on other sites

então aparentemente está tudo certo com o js.

 

você está acessando o teu function.inc.php, passando o parametro pra ele ??

 

?idCombo=33

 

? deve voltar um jSON populado. Se não voltar, o erro está no php.

Share this post


Link to post
Share on other sites

Olha William, o trecho está assim:

 

$.getJSON(//esse método do jQuery, só envia GET  
'function.inc.php',//script server-side que deverá retornar um objeto jSON  
{idCombo1: idCombo1},//enviando a variável

Sou ainda leigo em jquery... não sei se tenho que fazer isso -> function.inc.php?idComobo=idCombo1. Eu sei o que é passar por parametro um valor, mas nesse esquema acima não.

Share this post


Link to post
Share on other sites

acesse pelo browser:

 

localhost/function.inc.php?idCombo1=33

 

 

e veja oque aparece.

Share this post


Link to post
Share on other sites

Apareceu isso:

[{"id":"20","nome":"Areia ","cidade":"34"},{"id":"19","nome":"Praia Grande ","cidade":"34"}]

 

Que são os dados da tabela bairro. Certinho.

 

Sabemos que se houver a passagem do id da cidade corretamente, há então o preenchimento do array. E agora, como eu faço a passagem do paramentro dinamicamente?

 

E muito obrigado pela ajuda W. Bruno.

Share this post


Link to post
Share on other sites

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.