Boteco Digital

Como vimos em um artigo anterior sobre AJAX é muito fácil utilizar técnicas de AJAX para tornar um site dinâmico. Hoje veremos um exemplo fácil de como selecionar um estado em um ComboBox e carregar as cidades em outro.

Para começarmos termos que ter os estados e as cidades armazenadas no banco de dados que podem ser obtidas a partir do site. Para ficar mais claro colocarei as DDL abaixo.

CREATE TABLE tb_estados(
  id int(2) unsigned zerofill NOT NULL auto_increment,
  uf varchar(10) NOT NULL default '',
  nome varchar(20) NOT NULL default '',
  PRIMARY KEY  (`id`)
);

CREATE TABLE tb_cidades (
  id int(4) unsigned zerofill NOT NULL auto_increment,
  estado int(2) unsigned zerofill NOT NULL default '00',
  uf varchar(4) NOT NULL default '',
  nome varchar(50) NOT NULL default '',
  UNIQUE KEY id (id),
  KEY id_2 (`id`)
);

Agora que já temos as tabelas em nosso banco MySQL criamos uma página com os dois ComboBox com o dos estados já preenchido, para isto realizamos uma consulta ao banco de dados MySQL para preenche-lo.

<select name="estados" id="estados">
    <?php
        mysql_connect('localhost','root','********');
        mysql_selectdb('combobox');

       $result = mysql_query("select * from tb_estados");

       while($row = mysql_fetch_array($result) ){
            echo "<option value='".$row['id']."'>".$row['nome']."</option>";

       }

    ?>
</select>

<select name="cidades" id="cidades">
    <option value="0">Escolha um estado</option>
</select>

Na linha 3 conectamos no banco através da função mysql_connect() passando o host que esta o banco de dados, o usuário e a senha de acesso ao banco. NA linha 4 selecionamos o banco de dados que queremos utilizar com a função mysql_selectdb().

Na linha 6 utilizamos a função mysql_query() para realizar uma consulta ao banco de dados para trazer todos os estados.

Na linha 8 utilizamos a função mysql_fetch_array() para acessar uma linha da nossa consulta e armazená-la na variável $row. A função mysql_fetch_array() retorna a linha da consulta em formato de array, sendo que cada índice do array é o nome da coluna em que o valor está.

Na linha 9 montamos as opções do nosso select.

Bom agora com nossa página pronta podemos inserir o código javascript(AJAX) para executar a consulta quando selecionarmos o estado. O código utiliza a biblioteca JQuery então não esqueça de carregá-la antes de inserir o código.

        $(document).ready(function(){
            $('#estados').change(function(){
                $('#cidades').load('cidades.php?estado='+$('#estados').val() );
            });
        });

Na linha 2 selecionamos o elemento com o id estados(o primeiro select), e adicionamos o evento onChange que é acionado quando ele muda de valor. Quando este evento for acionado(linha 3) ele vai selecionar o select com o id cidades fazer uma consulta AJAX a página cidade.php passando por parâmetro GET o id do estado que foi selecionado no select de estados. O retorno desta consulta será inserido dentro do select prenechendo as opções de cidades.

Bom agora que já temos um código javascript que faz uma requisição a uma página devemos criar esta página

Lembrando que o retorno desta página vai preencher nosso select, então ela deve retornar tags option certo!

<?php
$idestado = $_GET['estado'];
mysql_connect('localhost','root','******');
mysql_selectdb('combobox');
$result = mysql_query("SELECT * FROM tb_cidades WHERE estado = ".$idestado);
while($row = mysql_fetch_array($result) ){
    echo "<option value='".$row['id']."'>".$row['nome']."</option>";
}
?>

O código é bem parecido com o anterior onde preenchemos o select estados, só que desta fez utilizaremos uma consulta com um cláusula WHERE onde selecionamos somente as cidade que tiverem o estado igual ao que foi passado por parâmetro GET e que recebemos na linha 2.

O download do exemplo pode ser feito aqui

Bom este exemplo é bem simples, é possível fazer muito mais coisas com JQuery e AJAX basta ter criatividade.

Até a próxima!