Atualizar combos dinamicamente com php + jquery

Uma das mais recorrentes situações para quem está desenvolvendo um sistema para web é o preenchimento de combos(selects) com dados vindos do banco de dados e também a atualização de uma possível segunda combo baseando-se na escolha da primeira.

Pois bem, no post de hoje veremos como é simples fazer essa tarefa através do jquery.

No nosso exemplo, iremos trabalhar com duas tabelas que se relacionam: tbl_estados(id_estado, nome_estado) e tbl_cidades(id_cidade, nome_cidade, id_estado) onde a chave primária da tabela de estados é chave estrangeira na tabela de cidades.

Bom, antes de iniciar vamos definir os arquivos da nossa aplicação:

  • index.php
  • listaCidades.php
  • jquery.js

Os dois primeiros iremos criar manualmente. Só o jquery.js é que iremos baixar(nesse link).

Vamos à implementação do arquivo index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
mysql_connect('localhost', 'root', 'senha') or die('Erro ao conectar com o servidor');
mysql_select_db('cidades') or die('Erro ao conectar com o banco de dados');
 
$rs = mysql_query("SELECT * FROM tbl_estados ORDER BY nome_estado");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Atualizando combos com jquery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.6.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#estado').change(function(){
            $('#cidade').load('listaCidades.php?estado='+$('#estado').val());
        });
    });
    </script>
  </head>
  <body>
  <h1>Atualizando combos com jquery</h1>
    <label>Estado:</label>
    <select name="estado" id="estado">
    <?php while($reg = mysql_fetch_object($rs)): ?>
        <option value="<?php echo $reg->id_estado ?>"><?php echo $reg->nome_estado ?></option>
    <?php endwhile; ?>
    </select>
    <br /><br />
    <div id="cidade"></div>
  </body>
</html>

Nas linhas 2,3 e 5 eu me conecto com o servidor MySQL, seleciono o banco e executo a consulta que vai me retornar os dados para preencher a combo de estados.

Na linha 12 eu importo o jquery. Logo depois eu defino a função que executará via ajax o arquivo listaCidades.php, passando como parêmetro GET (na url) o estado selecionado. O listaCidades.php por sua vez criará uma segundo combo listando as cidades apenas pertencentes ao estado escolhido.

Das linhas 24 à 28 eu faço a combo de estados. Através de um laço que percorre os resultados da minha consulta eu consigo preencher a lista com todos os estados cadastrados no banco.  Depois eu crio a div cidade, que é a div que receberá o resultado da função jquery (no caso, a combo de cidades). (OBS: preste atenção nos nomes das divs porque é importante na hora do jquery executar uma requisição).

Agora a implementação do arquivo listaCidades.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
mysql_connect('localhost', 'root', 'senha') or die('Erro ao conectar com o servidor');
mysql_select_db('cidades') or die('Erro ao conectar com o banco de dados');
 
$id_estado = $_GET['estado'];
 
$rs = mysql_query("SELECT * FROM tbl_cidades WHERE id_estado = '$id_estado' ORDER BY nome_cidade");
 
echo "<label>Cidades: </label><select name='cidade'>n";
while($reg = mysql_fetch_object($rs)){
    echo "<option value='$reg->id_cidade'>$reg->nome_cidade</option>n";
}
echo "</select>n";
 
?>

Processo semelhante. Defino minha conexão com o banco de dados, pego no $_GET o estado passado como parâmetro e executo uma consulta sql na tabela de cidades. Depois crio a combo para cidades com os resultados dessa consulta.

Pronto! Basta executar o index.php e selecionar um estado. Você vai perceber que uma segundo combo irá surgir com a lista de cidades referentes ao estado escolhido.

Espero que tenham gostado.

Abs.

Siga-me no twitter: @rafaelwendel

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  1. Não fuionou comigo porque eu envio depois o formulario com esse codigo: abaixo ai quando eu seleciono o estado ele ja tá Enviando mensagem aguarde alguem sabe porque se sim passa a solução; vlw

    jQuery(document).ready(function() {
    jQuery(“#resposta”).ajaxStart(function(){ jQuery(this).html(“Mensagem sendo enviada, por favor aguarde…”); });
    jQuery(‘#submit’).click(function() {
    var nome = jQuery(‘#nome’).val();
    var email = jQuery(‘#email’).val();
    var telefone = jQuery(‘#telefone’).val();
    var uf = jQuery(‘#uf’).val();
    var cidade = jQuery(‘#cidade’).val();
    var assunto = jQuery(‘#assunto’).val();
    var mensagem = jQuery(‘#mensagem’).val();
    jQuery.post(‘./envia.php’,
    { nome: nome, email: email, telefone: telefone, uf: uf, cidade: cidade, assunto: assunto, mensagem: mensagem, contato: true },
    function(data, textStatus) {
    jQuery(‘#resposta’).html(data);
    });
    return false;
    });
    });

  2. Rafael, primeiramente, parabéns pela disponibilidade em ajudar o pessoal!
    Eu postei esta mesma dúvida em outro artigo teu, mas acredito que aqui encaixe melhor.

    Eu tenho um formulário dinâmico e gostaria de capturar o nome do cliente no momento em que digito seu código.
    Por exemplo: Eu tenho uma lista de 1000 clientes [em BD MySQL] e gostaria que, no formulário onde preencho o CÓDIGO do cliente, ele já me retorne o NOME do cliente no campo ao lado.
    O Form está em HTML com JQuery, adicionando campos dinâmicos.

    Grande abraço!

  3. Rafael, tudo bem?
    Já nos falamos algumas vezes e foi muito grande e importante sua ajuda.
    Eu adaptei o seu codigo aqui e funciou legal. Mas na verade preciso de duas coisas:
    1) quero que o combo fique sempre aparecendo, mas que carregue comente quando o Estado é Selecionado.
    2) Preciso ainda que o Estado carregue a partir de um entenvo. Por exemplo, quando eu digito o cep. Neste caso fica assim:
    a) CEP (em campo normal)
    b) carrega o combo Estado
    c) Carrega o combo Cidade.

    Agradeço muito sua ajuda. O sistema é para uma entidade filantrópica, sem nenhum conteúdo comercial. Estou no final da primeira fase.

    obrigado.
    Edson

    1. Olá Edson,

      Para fazer o que você está querendo é só dar uma melhorada no AJAX. Você terá que criar eventos quando o CEP for digitado e quando o estado for selecionado.

      Entendendo como funciona o AJAX, sua estrutura, a troca de dados entre cliente/servidor, etc. Aí você conseguirá fazer coisas bem legais.

      Abs!

      1. Rafael,

        Primeiramente muito obrigado pela resposta. Eu estou com o sistema praticamento pronto, faltando apenas esta rotina. Como eu não sei AJAX e meu tempo está acima do limite, gostaria de saber se tem interesse em desenvolver esta rotina para mim a um custo hora.
        Agradeço sua atenção,
        Obrigado.
        Edson

  4. Meu caro Amigo,
    Copiei todo o codigo, no select estados ele carrega normalmente, e quando faço a seleção do estado então na hora de passar o valor para a pagina listaCidades.php aparece esse erro, porem a conexão com bd esta correta. O erro esta no method get?

    Agradeço um retorno.

    Warning: mysql_connect() [function.mysql-connect]: Access denied for user ‘root’@’localhost’ (using password: YES) in C:\xampp\htdocs\edam\listaCidades.php on line 11
    Erro ao conectar com o servidor

  5. primeiramente obrigado, sua explicação resolveu parte do meu problema,

    eu consegui fazer uma vez, porém eu preciso usar o valor selecionado no criado pelo jQurey como parâmetro pra outra função igual, o problema é que ele não está selecionando a variável, ta retornando sempre vazia…

  6. Boa tarde!!! Excelente código, o unico problema que eu tive é que no primeiro combo a acentuação aprece certa mais no segundo não, aparecem caracteres estranhos. Sabe o que poderia ser?? uso iso-8859-1.

  7. Olá Rafael,

    Como faço para capturar a cidade selecionada no select abaixo, para posteriormente exibir uma informação conforme a cidade
    selecionada. Já tentei várias alternativas como
    e até o momento não funcionou. Estou utilizando Ajax.

    <?php for($j = 0;$j
    <option value="”>

  8. Rafael, não tenho palavras pra te agradecer! Se você soubesse o quanto eu procurei, quantos códigos imensos eu testei sem sucesso, saberia o tamanho da minha gratidão agora! Muito obrigada por compartilhar seu conhecimento!!!

  9. E aí Rafael! Cara muito bom mesmo, procurei bastante na internet mas os códigos eram muito grandes, e eu acabava me enrolando todo.
    Fiz tudo certinho, só estou meio perdido com relação ao arquivo jquery.js (onde devo colocar este aquivo?).

  10. Olá Rafael Wendel Pinheiro

    Primeiramente excelente esse seu post e parabéns por tentar ajudar outras pessoas.

    Cara copiei seu código para uma necessidade que tenho em um sistema que estou desenvolvendo, porém estou com problema, vou listar tudo que está acontecendo com meu código para ver se você me ajuda.

    Seguinte na minha index.php estão semelhante a sua somente alterado de acordo com minha necessidade.

    Consigo fazer o envio do ID do campo selecionado fiz um echo na página que recebe as informações apenas para ter certeza de que o valor estava sendo transmitido e está certo.

    Dentro da minha página recebe_dados.php eu recebo o valor selecionado como já informei faço o select para o outro dado que preciso no Banco e ele me retorna true, ou seja, está funcionando perfeitamente, porém, depois que eu monto o while e dou um echo para montar o ooption, ele não preenche os dados que deveriam ser carregados.

    O que devo fazer?

    Se quiser posso te mandar por e-mail o que fiz.

    Atenciosamente.

  11. Eu peguei todo o seu exemplo não mudei nada, porem apresenta o erro abaixo.

    Ola a página listaCidades.php, fica apresentando esse erro , referente ao GET
    Notice: Undefined index: estado in C:\wamp\www\Mesa_Teste\listaCidades.php

  12. Obrigado pela ajuda Rafael, gostaria de saber se você pode me ajudar em outra coisa, estou cadastrando em meu banco de dados bairros referentes a cada cidade selecionada, porem nao estou conseguindo pegar no GET a cidade selecionada, consegui pegar o GET do estado mas quando tento pegar o GET da cidade para consultar os bairros eu nao consigo, será que voce poderia me ajudar??
    Desde já te agradeço! Ótima explicação!

  13. Caro Rafael, estou procurando uma solução para combos aninhados ha meses e sempre encontro códigos imensos. Eu sempre tinha em mente que a solução era um código pequeno e simples como o que vc demonstrou. Perfeito, era exatamente o que eu gostaria de ter descoberto mas não tinha capacidade para tal… Parabéns, estou escrevendo em 2019 e esse código de 2011 é fantástico!! acredito que mesmo depois de décadas ainda terá gente se beneficiando dessa maravilha. Muito Obrigado Amigo.

  14. Parabéns Rafael, muito bom, mas como faço para já mostrar a div “cidade” já com o campo que está no banco mysql? Com o seu código só mostra a div depois que seleciona outro estado.

      1. Isso resolve o caso de mostrar a div assim que acessa a página, mas quando seleciona um novo estado, a cidade escolhida em listaCidades.php não é enviada para o banco.

        1. Oi Daniele,

          É só limpar a div “cidades” sempre que uma nova requisicao for chamada (quando um novo estado for selecionado). Adicione a seguinte linha antes da linha 15 do javascript.(index.php)

           $('#cidade').html("");

          Abs!

          1. Ainda não é isso rs. Vou tentar de outra forma e posto aqui qualquer coisa, mas já adiantou muito. Valeu Rafael.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *