0

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>

inserir a descrição da imagem aqui

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>

inserir a descrição da imagem aqui

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>';
    }
?>

inserir a descrição da imagem aqui

1
  • Olá Leo Caracciolo, eu não estou conseguindo entender o porque, mas o meu está idêntico ao seu, e não abre o select das cidades. Porém quando retiro o select do option da página cidades.php ele funciona, mas em ambos os casos não esta me trazendo os bairro referente as cidades. No estado RJ existe na cidade de Armação dos Búzios 2 bairros e não consigo listalos quando selecionado a cidades de Búzios. Você tem ideia de como solucionar isso. Testar o meu exemplo. (pbfjacarepagua.com.br/com%20select/estados.php) e (pbfjacarepagua.com.br/sem%20select/estados.php).
    – Murilo
    Commented 12/11/2017 às 23:34

1 Resposta 1

1

Basicamente os arquivos cidades.php e bairros.php são constituídos somente das consultas ao banco de dados, todo o resto dentro do arquivo estados.php

A biblioteca js/jquery.js, os dois scripts e as divs onde serão apresentados os selects dentro do arquivo estados.php

Você pode usar <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> ao invés de <script type="text/javascript" src="js/jquery.js"></script>

No primeiro script foi acrescentado essa linha de código,

$("#bairros").css({"display":"none"});

veja porque no comentário dentro do código

estados.php

<?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...");

                //quando mudar de estado esconde select de bairros
                $("#bairros").css({"display":"none"});

                },
                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>


<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>

cidades.php

<?php
include 'conexao.php';
   $sql = $pdo->prepare("SELECT * FROM cidades WHERE cod_estado = '".$_POST['cod_estado']."'");
   $sql->execute();
   $fetchAll = $sql->fetchAll();
   echo '<option value="">Cidades...</option>';
   foreach($fetchAll as $cidades)
   {
     echo '<option value="'.$cidades['cod_cidade'].'">'.$cidades['nome_cidade'].'</option>';
   }
?>

bairros.php

<?php
include 'conexao.php';
    $sql = $pdo->prepare("SELECT * FROM bairros WHERE cod_cidade = '".$_POST['cod_cidade']."'");
    $sql->execute();
    $fetchAll = $sql->fetchAll();
    echo '<option value="">Bairros...</option>';
    foreach($fetchAll as $bairros)
    {
        echo '<option value="'.$bairros['cod_bairro'].'">'.$bairros['nome_bairro'].'</option>';
    }
?>
2
  • Valeu Leo Caracciolo, só tive que alterar essa linha echo '<option>'.$bairros['nome_bairro'].'</option>'; por essa <option value="'.$bairros['cod_bairro'].'">'.$bairros['nome_bairro'].'</option> para que funcionasse perfeito. Muito Obrigado pela sua atenção ao meu problema, que foi solucionado graças as suas dicas e orientações, OBRIGADÃO mesmo.
    – Murilo
    Commented 13/11/2017 às 11:47
  • Beleza, alterei na resposta também!
    – user60252
    Commented 13/11/2017 às 12:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .