Usei uma vídeo aula do YouTube para criar um Combo Box de Estados e Cidades, porém segui o raciocínio da pagina ESTADOS.PHP e inseri na página CIDADES.PHP e criei a página BAIRROS.PHP, mas não obtive sucesso, pois quando insiro o <select name="cidades" id="cidades">
na página cidades.php ele não me lista as cidades.
Tem como os amigos me explicarem como dar continuidade ao Combo trazendo as cidades, pra que eu possa buscar os bairros com a página BAIRROS.PHP.
Código da Pagina ESTADOS.PHP e Tabela estados abaixo:
<?php include 'conexao.php';?>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<div style="float:left; width:auto; padding:0 1px">
<select name="estados" id="estados">
<option value="">Estados...</option>
<?php
$sql = $pdo->prepare("SELECT * FROM estados ORDER BY nome_estado ASC");
$sql->execute();
$fetchAll = $sql->fetchAll();
foreach($fetchAll as $estados)
{
echo '<option value="'.$estados['cod_estado'].'">'.$estados['nome_estado'].'</option>';
}
?>
</select>
</div>
<div style="float:left; width:auto; padding:0 1px">
<select id="cidades" style="display:none"></select>
</div>
<script>
$("#estados").on("change",function(){
var cod_Estado = $("#estados").val();
$.ajax({
url: 'cidades.php',
type: 'POST',
data:{cod_estado:cod_Estado},
beforeSend: function(){
$("#cidades").css({'display':'block'});
$("#cidades").html("Carregando...");
},
success: function(data)
{
$("#cidades").css({'display':'block'});
$("#cidades").html(data);
},
error: function(data)
{
$("#cidades").css({'display':'block'});
$("#cidades").html("Houve um erro ao carregar");
}
});
});
</script>
Código da Pagina CIDADES.PHP e Tabela cidades abaixo:
<?php include 'conexao.php';?>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<div style="float:left; width:auto; padding:0 1px">
<select name="cidades" id="cidades">
<option value="">Cidades...</option>
<?php
$sql = $pdo->prepare("SELECT * FROM cidades WHERE cod_estado = '".$_POST['cod_estado']."'");
$sql->execute();
$fetchAll = $sql->fetchAll();
foreach($fetchAll as $cidades)
{
echo '<option value="'.$cidades['cod_cidade'].'">'.$cidades['nome_cidade'].'</option>';
}
?>
</select>
</div>
<div style="float:left; width:auto; padding:0 1px">
<select id="bairros" style="display:none"></select>
</div>
<script>
$("#cidades").on("change",function(){
var cod_Cidade = $("#cidades").val();
$.ajax({
url: "bairros.php",
type: "POST",
data:{cod_cidade:cod_Cidade},
beforeSend: function(){
$("#bairros").css({"display":"block"});
$("#bairros").html("Carregando...");
},
success: function(data)
{
$("#bairros").css({"display":"block"});
$("#bairros").html(data);
},
error: function(data)
{
$("#bairros").css({"display":"block"});
$("#bairros").html("Houve um erro ao carregar");
}
});
});
</script>
Código da Pagina BAIRROS.PHP e Tabela bairros abaixo:
<?php
include 'conexao.php';
$sql = $pdo->prepare("SELECT * FROM bairros WHERE cod_cidade = '".$_POST['cod_cidade']."'");
$sql->execute();
$fetchAll = $sql->fetchAll();
foreach($fetchAll as $bairros)
{
echo '<option>'.$bairros['nome_bairro'].'</option>';
}
?>