Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Muito obrigado William Bruno primeiramente, mas me perece que os exemplos não estão funcionando.
é que eu mudei de servidor, e ainda não tinha alterado os dados do banco.
Vou tentar adaptar para o meu sistema, qualquer coisa eu posto aqui. Muito obrigado amigo pela ajuda.
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.
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.
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á.
exato, você deve acessar o teu arquivo diretamente e tb, aparecer algo parecido com isso ai.
Quando eu acesso o meu function.inc.php aparece isso: [{"id":"0"}] e só isso.
Qual é o problema?
Obrigado desde já.
o problema é que o teu php não está trazendo dado nenhum.
debug a query e descubra o motivo
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()...**> **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.
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.
descomente este alert:
alert(idCombo1);//apenas para debugar a variável
diga oq aparece.
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
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.
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.
acesse pelo browser:
localhost/function.inc.php?idCombo1=33
e veja oque aparece.
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.
E agora, como eu faço a passagem do paramentro dinamicamente?
o script já faz isso aqui nesse trecho:
var idCombo1 = $(this).val();//pegando o value do option selecionado
leia:
http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/
http://wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/
Mudei o function.inc.php para isso:
<?php
include "../estaticos/conexao.php";
$sql = "select id, nome, cidade from aprimorar.bairro where cidade = ".$_GET['idCombo1'];
$q = pg_query($conexao, $sql);
$total = pg_num_rows($q);
if($total > 0) { $json[] = Array('id'=> $array["id"], 'nome'=> utf8_decode($array["nome"]), 'cidade'=> $array["cidade"]);
}$json[] = Array('nome'=> utf8_encode( 'nao encontrado' ), 'id'=> '0' );
}
return json_encode( $json );
?>
O problema é que não chega o id da cidade por parâmetro, por isso o select não traz dados... Só falta isso pra resolver o problema.Se alguém tiver alguma ideia eu agradeço desde já.
ai o seu problema é exclusivamente php.
esse return não faz sentido ai, pois você não tem nenhuma function.
e você não está recebendo nenhum $_GET.W.Bruno já li e salvei seus dois artigos, muito bem explicado - Parabéns!
Fiz um teste, coloquei functionn.inc.php (com um n a mais), só pra me familiarizar com o Firebug e apareceu:
GET functionn.inc.php?idCombo1=1 404 Not Found... Obvio, uma vez que o nome do arquivo é function.inc.php.
Mas o que me "surpreendeu" foi a passagem da variavél idCombo1=1, ou seja, ela está sendo passada. Só não estou conseguindo "pega-la" no function.inc.php
Seria essa a função que pega o variavél que vem por parâmetro, não é?
function intGet( $campo ){
return isset( $_GET[$campo] ) ? (int)$_GET[$campo] : 0;
}Não entendi a relação dela com a debaixo:
function retorno( $id )
{...}
A primeira usa $campo e a debaixo $id.
Poderia me explicar isso por gentileza? E desde já muito obrigado.
Uma outra coisa, sei que no google existem milhares, mas você teria alguma sugestão de leitura sobre javascript? Obrigado.
a relação entre os 2, é o
echo retorno( intGet('idCombo1') );
ou seja, a chamada da função retorno.
William Bruno agora está funcionando só que somente no Firefox (7.0.1). Só que acontece o seguinte: quando eu clico na cidade, aparecem os bairros no outro select, até ai tudo bem, mas quando eu clico no select (combobox) do bairro, pressiona o select da cidade. Veja na imagem
/applications/core/interface/imageproxy/imageproxy.php?img=http://i44.tinypic.com/34ns67a.jpg&key=63405870ef1b0360712faf905ed1456e3b33aa0576342ec7ed90ecc00293d9d8" alt="34ns67a.jpg" />
Ai eu abusando de sua boa vontade pergunto:
1-) Por que só funciona do Firefox?
2-) Por que quando clico no select do bairro pressiona automaticamente o select da cidade. Fica difícil de escolher o bairro desta forma.
Muitissimo obrigado desde já.
exemplo com jQuery:
http://wbruno.com.br/blog/2009/10/06/combos-dependentes-ajax-jquery/