popular combobox html sql

Kelvim · 19 de dezembro de 2016

Boa tarde

Meu nome é Kelvim Barbosa Gomes. Eu estou querendo saber se existe alguma forma de fazer uma pagina em HTML, com combobox para Estado, outro combobox para Cidade.

De acordo com o Estado, ele puxa as cidades.

Consegui na internet um exemplo porém a pagina do modelo é em PHP.

Eu preciso que a pagina seja em HTML, e efetue a consulta no banco de dados.

Atenciosamente

Luan cabral · 19 de dezembro de 2016

@Kelvim a pagina até pode ser em HTML, mais teria que ter uma pagina em PHP para fazer a consulta no banco.

Kelvim · 19 de dezembro de 2016

Será que você conseguiria fazer um modelo dessa página em HTML, com uma pagina em PHP efetuando a consulta.

Eu tentei mas não deu muito certo.

Att

Luan cabral · 19 de dezembro de 2016

@Kelvim to sem ferramente nenhuma aqui para fazer o teste, além que vai ter que usar JS, que sou bem ruim.

DiF · 19 de dezembro de 2016

@Kelvim Olá.

Assumindo que você já tem o banco de dados com as tabelas de estado e cidade com seu devido relacionamento.

PS: você pode pegar o banco de dados dos correios que possui cidade, estado, ruas e cep e importar no seu banco de dados.

Para fazer o que você quer é necessário que tenha conhecimento em:

PHP, javascript(melhor se for jQuery) e usar a técnica ajax. esta técnica faz requisições assíncronas ao servidor. Ou seja, é usada para eliminar o "atualizar" da página toda vez que faz algo nela.

Então, seu código inicial será um combobox de estados puxando o nome dele e o ID dele:

<select name="estados" id="estados">
   <?php  
       //Inclui a conexaão com o banco de dados
       include 'conexao_com_BD.php';
       
       //Faz a consulta na tabela desejada
       $consulta = mysqli_query($conexao, "SELECT ID, nome FROM estados");
  
       //Laço de repetição para inserir cada estado em um option do select
       while($estados = mysqli_fetch_object($consulta)):
             echo "<option value='$estados->ID'> $estados->nome </option>"; 
       endwhile;
   ?> 
</select>

Desta forma, você faz uma consulta a tabela de estados, pega o ID dele e o nome do estado.

Com um laço de while você percorre toda esta tabela. Dentro dele você printa em tela o option do combobox populado.

OK, ainda falta coisa.

Agora precisas fazer com que toda vez que muda uma opção do elemento select, executa uma ação. esta ação é o ajax, que solicita um arquivo php que faz a verificação do estado e puxa as cidades daquele estado. O retorno disso você cria um novo select com php populado..

Por exemplo

//Quando o documento estiver pronto
$(document).ready(function(){
  
    //ação de mudar a opção do select
    $('#estados').change(function (e) {
     
     //Mesmo que return false 
     e.preventDafault();
      
     //Armazena em uma variável a opção selecionada 
     var selecionado = $(this).find("option:selected");
      
     //Armazena em uma variável o valor "value" do option selecionado 
     var valor       = selecionado.val();
      
      /*Função ajax
        Parâmetros: url é o arquivo que vai ser solicitado
        dataType é o tipo de dado
        method é o método como será enviado
        data é o valor que será enviado pelo método.
        
        A função done() é usada para inserir o retorno utilizado
        no php quando bem sucedido. Entra no bloco de IF no php
        
        A função fail() é a mesma coisa mas para todas as vezes que cair no
        bloco de ELSE quando der algo errado
      */
      $.ajax({
               url: "processaDados.php",
               dataType: "html",
               method: "GET",
               data {'estados': valor}
      }).done(function(retorno){
            $("#cidades").html(retorno);
      }).fail(function(retorno){
            $("#erro").html(retorno);
      });
    });

});

No arquivi PHP chamado processaDados.php você recebe o valor do ID do estado por GET e faz uma nova consulta:

<?php
    //inclui a conexão com o banco de dados
   include 'conexao_com_BD';

   //armazena em uma variável o valor ID do estado vindo da requisição ajax
   $ID = $_GET["estados"];

    //Faz a consulta na tabela desejada
   $seleciona = mysqli_query($conexao, "SELECT ID, nome FROM cidade WHERE id_estado = $ID ");
 
    //testa se foi feito a consulta. SE sim, mostra um novo select com as cidades selecionadas
   if($seleciona):
       echo "<select name='cidades' class='cidades'>";
                while($cidades = mysqli_fetch_object($seleciona)):
                      echo "<option value='$cidades->ID'> $cidades->nome</option> ";
                endwhile;
       echo "</select>";       
   else:
        //mostra uma mensagem de erro caso não tenha sido bem sucedido na consulta
       echo "Não foi possível carregar os dados";
   endif;

Basicamente, estou dizendo que na primeira linha abro a conexão com banco de dados.

Logo em seguida recebo por GET o valor ID do estado.

Na terceira linha faço a consulta ao BD pedindo todas as cidades que são relacionadas ao estado escolhido.

O bloco de IF testa se:

For efetuada com sucesso a consulta, cria um novo select populado com os dados das cidades.

Senão, o bloco do else informará um erro.

Repare que este erro é inserido no javascript na função fail() do ajax.

Bom devo lembra-lo que estes são exemplos hipotéticos, de forma alguma, copie e cole sem antes estuda-lo e adaptar para seu código. Caso contrário pode nem funcionar.

PS: existe várias maneiras de fazer tudo isso. esta é só uma delas!