Carregando um ComboBox com AJAX com JQuery
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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.
1 2 3 4 5 | $(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!
1 2 3 4 5 6 7 8 9 | <?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!
Atualmente existe 6 comentários
Olá rodrigo,
gostaria de saber qual é o formato que o banco te retorna quando tu faz a requisição.
Ex.: o que é retornado no result da linha “while($row = mysql_fetch_array($result) ){” ?
Obrigado.
ao utilizar a função mysql_fetch_array() é retornado a próxima linha da tabela de resultado em um array, sendo cada índice do array o nome da coluna.
Este link deve ajudar http://php.net/manual/pt_BR/function.mysql-fetch-array.php
Fiz um sisteminha que continha os campos pais, cidade e estado no cadastro de clientes, o que acontece é que na atualização não consigo que os campos venham preenchidos automaticamente por causa do ajax… você pode me ajudar a resolver isso?
muito bom. esses tutorial. mas estou com um problemas 2 estados não estão funcionando “São Paulo” e “Alagoas”, não consigo encontrar o problema.
O exemplo esta funcionando corretamente, você pode utilizar o plugin firebug para ver se ocorre algum erro de javascript.
Também pode ser algum problema com o banco de dados tente listar as cidades de alagoas na mão “http://localhost/ajax-combo/cidades.php?estado=02″
Parabéns! Simples e direto, me ajudou muito!