[Resolvido] Combobox cidade que popula combo bairro

ment0r · Outubro 24, 2011

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.

William Bruno · Outubro 24, 2011

exemplo com jQuery:

http://wbruno.com.br/blog/2009/10/06/combos-dependentes-ajax-jquery/

ment0r · Outubro 25, 2011

Muito obrigado William Bruno primeiramente, mas me perece que os exemplos não estão funcionando.

William Bruno · Outubro 25, 2011

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

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

ment0r · Outubro 28, 2011

Vou tentar adaptar para o meu sistema, qualquer coisa eu posto aqui. Muito obrigado amigo pela ajuda.

ment0r · Outubro 28, 2011

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.

William Bruno · Outubro 28, 2011

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.

ment0r · Outubro 30, 2011

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

William Bruno · Outubro 30, 2011

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

ment0r · Outubro 31, 2011

Quando eu acesso o meu function.inc.php aparece isso: [{"id":"0"}] e só isso.

Qual é o problema?

Obrigado desde já.

William Bruno · Outubro 31, 2011

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

debug a query e descubra o motivo

ment0r · Novembro 1, 2011

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

William Bruno · Novembro 1, 2011

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.

ment0r · Novembro 1, 2011

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.

William Bruno · Novembro 1, 2011

descomente este alert:

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

diga oq aparece.

ment0r · Novembro 1, 2011

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

William Bruno · Novembro 1, 2011

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.

ment0r · Novembro 1, 2011

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.

William Bruno · Novembro 1, 2011

acesse pelo browser:

localhost/function.inc.php?idCombo1=33

e veja oque aparece.

ment0r · Novembro 1, 2011

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.

Arquivado

[Resolvido] Combobox cidade que popula combo bairro

Recommended Posts

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

ment0r 1