0
I used a video lesson from Youtube to create a Combo Box of States and Cities, but I followed the reasoning of the page ESTADOS.PHP and entered in the page CIDADES.PHP and created the page BAIRROS.PHP, but I was not successful, because when I insert the <select name="cidades" id="cidades"> on the page cities.php it does not list me the cities.
There’s a way friends can explain to me how to continue Combo bringing cities, so I can search the neighborhoods with the page BAIRROS.PHP.
Code of the STATES.PHP page and Table states below:
<?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>
CITIES.PHP Page Code and Table Cities below:
<?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>
Code of the NEIGHBORHOODS page.PHP and Table below neighborhoods:
<?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>';
}
?>
Hello Leo Caracciolo, I can not understand why, but mine is identical to yours, and does not open the select of cities. But when I take the select from the option on the cities.php page it works, but in both cases it’s not bringing me the neighborhoods referring to the cities. In the state RJ exists in the city of Armação dos Búzios 2 neighborhoods and can not list when selected the cities of Búzios. You have an idea how to solve this. Test my example. (https://www.pbfjacarepagua.com.br/com%20select/estados.php) and (https://www.pbfjacarepagua.com.br/sem%20select/estados.php).
– Murilo