Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
estou criando um site de imóveis e no mecanismo de busca na pagina princiapl, gostaria de colocar aqueles combobox:
Selecione o estado
Selecione a cidade
selecione o bairro
Conforme a seleção, vai exibindo o que existe associado.
Na verdade, minha dúvida é como montar esse "relacionamento" entre os combos, pois as tabelas e os selects eu sei montar.
Alguem pode me ajudar ?
Eu tenho um código que lista somente as cidades e estados. É uma código do google, mais talvez possa ter dar uma luz.
O que falta é somente o Bairro, para atender sua necessidade.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cidade/Estado</title>
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}
</script>
<select id="estado" name="estado"></select>
<select id="cidade" name="cidade"></select>
</body>
</html>Boa sorte.
Abrass
Esse do Google é bem interessante. Mas gostaria de montar minha propria base.
Sim, poderia ser em AJAX.
Como é feito ?
Essa video aula é muito interessante e fala do que você precisa.
Com base nela, vai ser muito mais fácil desenvolver o que você quer.
Abrass.
maliotti na verdade tudo isso é @json, então você teria que montar assim a lógica:
O relacionamento seria feito através do value do select :thumbsup:
André Silva, seria algo semelhante com isso ?
http://www.daviferreira.com/posts/populando-selects-de-cidades-e-estados-com-ajax-php-e-jquery
kkkkk
Exatamente isso, perceba que ele pega todos os valores pelo .change e tals, desta forma mesmo, a unica diferença é que você vai ter um terceiro valor ali enviando para o back end (php) :P
Tenta fazer ae, qualquer coisa poste o codigo :thumbsup:
Mas na verdade a duvida em si + javascript do que php
Beleza. Vou colocar em pratica, mas percebi que é bem fácil.
Obrigado pela orientação.
Acho que me atrapalhei... Vejam o que eu fiz:
<script type="text/javascript">
$(document).ready(function(){
$("select[name=estado]").change(function(){
$("select[name=cidade]").html('<option value="0">Carregando...</option>');
$.post("cidades.php",
{estado:$(this).val()},
function(valor){
$("select[name=cidade]").html(valor);
}
)
//Inicio - Inserido por Julio Malliotti
$("select[name=bairro]").html('<option value="0">Carregando...</option>');
$.post("bairros.php",
{bairro:$(this).val()},
function(valor){
$("select[name=bairro]").html(valor);
}
)
//Fim - Inserido por Julio Malliotti
})
})
</script>Este codigo esta funcionando perfeitamente, peguei desse site ( http://www.mxmasters.com.br/video-aulas/php/php-combo-dinamico-com-php-e-jquery/ ) e com a idéia existente, gostaria de acrescentar a parte de bairros. Nesta caso, acrescentei o seguinte trecho:
//Inicio - Inserido por Julio Malliotti
$("select[name=bairro]").html('<option value="0">Carregando...</option>');
$.post("bairros.php",
{bairro:$(this).val()},
function(valor){
$("select[name=bairro]").html(valor);
}
)
//Fim - Inserido por Julio Malliottitenho o arquivo bairros.php, testei o mesmo e esta funcionando. Somente não esta carregando no combo bairro. Alguem sabe me dizer o porque ?
Pessoal!
Conseguri resolver. Abaixo segue o código:
<script type="text/javascript">
$(document).ready(function(){
$("select[name=estado]").change(function(){
$("select[name=cidade]").html('<option value="0">Carregando...</option>');
$.post("cidades.php",
{estado:$(this).val()},
function(valor){
$("select[name=cidade]").html(valor);
}
)
})
$("select[name=cidade]").change(function(){
$("select[name=bairro]").html('<option value="0">Carregando...</option>');
$.post("bairros.php",
{cidade:$(this).val()},
function(valor){
$("select[name=bairro]").html(valor);
}
)
})
})
</script>
ajax