Peguei um em um site internacional e fiz várias mudanças, mas ele está trazendo o resultado 0 e não o nome das cidades e bairros.
praticamente funciona tudo. Quando seleciono o estado ele traz um 0, visto que tenho duas cidades somente, ele não traz o nome da cidade. Se seleciono o 0 referente a Belo Horizonte, ele me diz que não tem bairros, porque não tem mesmo nessa tabela que tenho, se seleciono Rio de Janeiro que também aparece 0 e que tem dois bairros, ele traz dois 0
Deixando tudo aqui completo, que é o arquivo index.php, o ajaxdata.php, as tabelas do banco e o arquivo de conexão, porém como referi acima, ele está funcionando, porém só não traz os nomes das cidades ou dos bairros, e sim o 0, então é um detalhe que não estou acertando para ao invés do 0 vir os nomes
Não sei onde estou errando.
No index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Dependent Select Box using jQuery, Ajax and PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<?php
include_once 'config.php';
$query = "SELECT * FROM estados Order by estado";
$result = $db->query($query);
?>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form>
<div class="form-group">
<label for="email">Estado</label>
<select name="id_estado" id="id_estado" class="form-control" onchange="FetchCidade(this.value)" required>
<option value="">Selecione o Estado</option>
<?php
if ($result->num_rows > 0 ) {
while ($row = $result->fetch_assoc()) {
echo '<option value='.$row['id_estado'].'>'.$row['estado'].'</option>';
}
}
?>
</select>
</div>
<div class="form-group">
<label for="pwd">Cidade</label>
<select name="id_cidade" id="id_cidade" class="form-control" onchange="FetchBairro(this.value)" required>
<option>Selecione a Cidade</option>
</select>
</div>
<div class="form-group">
<label for="pwd">Bairro</label>
<select name="id_bairro" id="id_bairro" class="form-control">
<option>Selecione o Bairro</option>
</select>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function FetchCidade(id){
$('#id_cidade').html('');
$('#id_bairro').html('<option>Selecione o bairro</option>');
$.ajax({
type:'post',
url: 'ajaxdata.php',
data : { id_estado : id},
success : function(data){
$('#id_cidade').html(data);
}
})
}
function FetchBairro(id){
$('#id_bairro').html('');
$.ajax({
type:'post',
url: 'ajaxdata.php',
data : { id_cidade : id},
success : function(data){
$('#id_bairro').html(data);
}
})
}
</script>
</body>
</html>
ajaxdat.php
<?php
include_once 'config.php';
if (isset($_POST['id_estado'])) {
$query = "SELECT * FROM cidades where id_estado=".$_POST['id_estado'];
$result = $db->query($query);
if ($result->num_rows > 0 ) {
echo '<option value="">Selecione a cidade</option>';
while ($row = $result->fetch_assoc()) {
echo '<option value='.$row['id_cidade'].'>'.$row['cidade'].'</option>';
}
}else{
echo '<option>Cidade não encontrada</option>';
}
}elseif (isset($_POST['id_cidade'])) {
$query = "SELECT * FROM bairros where id_cidade=".$_POST['id_cidade'];
$result = $db->query($query);
if ($result->num_rows > 0 ) {
echo '<option value="">Selecione o Bairro</option>';
while ($row = $result->fetch_assoc()) {
echo '<option value='.$row['id_bairro'].'>'.$row['bairro'].'</option>';
}
}else{
echo '<option>Bairro não encontrado</option>';
}
}
As tabelas
-- --------------------------------------------------------
--
-- Table structure for table `bairros`
--
CREATE TABLE `bairros` (
`id_bairro` int(11) NOT NULL,
`id_cidade` varchar(155) NOT NULL,
`bairro` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `bairros`
--
INSERT INTO `bairros` (`id_bairro`, `id_cidade`, `bairro`) VALUES
(1, 1, 'Centro'),
(2, 1, 'Copacabana');
-- --------------------------------------------------------
--
-- Table structure for table `estados`
--
CREATE TABLE `estados` (
`id_estado` int(11) NOT NULL,
`estado` varchar(155) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `estados`
--
INSERT INTO `estados` (`id_estado`, `estado`) VALUES
(1, 'Rio de Janeiro'),
(2, 'Minas Gerais');
-- --------------------------------------------------------
--
-- Table structure for table `cidades`
--
CREATE TABLE `cidades` (
`id_cidade` int(11) NOT NULL,
`id_estado` varchar(155) NOT NULL,
`cidade` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `cidades`
--
INSERT INTO `cidades` (`id_cidade`, `id_estado`, `cidade`) VALUES
(1, 1, 'Rio de Janeiro'),
(2, 2, 'Belo Horizonte');
-- --------------------------------------------------------
E o arquivo de conexao apenas para deixar tudo aqui
<?php
$host = 'localhost';
$username = 'usuario';
$pass = 'senha';
$db = 'banco';
$db = new mysqli($host,$username,$pass,$db);
if ($db->connect_error) {
die("Connection Failed". $db->connect_error);
}
?>
