Ajax ComboBox
( Alimentando ComboBox de Estado e Cidades )

Mostrarei neste artigo como fazer para alimentar dinamicamente o conteúdo de uma ComboBox de acordo com uma escolha realizada pelo usuário do site. Não vamos nos limitar a colocar uma nova ComboBox dentro de uma DIV, mas sim trabalhar a nível de OPTION e apagá-las e criá-las conforme nossas necessidades.

Bem a estrutura das nossas tabelas seria bem simples:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
CREATE TABLE estados(
 
     idEstado int(5) UNSIGNED AUTO_INCREMENT,
     nome,
     PRIMARY_KEY(idEstado)
)
 
CREATE TABLE cidade(
 
     idCidade int(5) UNSIGNED AUTO_INCREMENT ,
     nome,
     PRIMARY_KEY(idEstado)
)

Agora vamos ao código HTML do nosso exemplo:

incluo meu arquivo de conecção no banco de dados:

1
2

 
<?php require("includes/connect.php") ?>

Incluo a biblioteca micoxAjax.js que será responsavel pelo envio dos parametros:

1
2

 
<script language="javascript" src="includes/micoxAjax.js"></script>

Formulario basico no nosso velho e bom HTML

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
33
34
35
36
37
38

 
<body>
<form name="addUser" action="addUser.php" method="post">
 
 
<table>
	<tr>
      <td>Estado:</td>
      <td>
      			<!-- Envio os parametro no evento onChange do campo select para o arquivo processCidades.php-->	
				<select name="estado" id="estado" class="txt" onChange="ajaxGet('processCidades.php?idEstado='+this.value, document.getElementById('cidade'), true)">
					<option value=""> -- Selecione -- </option>
					<?php
						//Busco os estados
						$sql = "SELECT * FROM estados ORDER BY nome";
						$results = mysql_query($sql);
						while ( $row = mysql_fetch_array($results) ) {
							echo "<option value='".$row[0]."'>".$row[1]."</option>";
						}
					?>
				</select>			
		</td>
    </tr>
		<tr>
      <td>Cidade: </td>
      <td>
				<div>
                	<!-- Campo que irá receber a consulta enviada-->
					<select class="txt" id="cidade" name="cidade">
						<option value="">Selecione uma unidade</option>
					</select>
				</div>			
		</td>
    </tr>
 
</table>
</body>
</html>

Neste código é relevante observar os seguintes pontos :

Linha 11:

1

 <select name="idUnit" id="idUnit" class="txt" onChange="ajaxGet('processCidades.php?idEstado='+this.value, document.getElementById('cidade'), true)">

Nesta linha adicionamos a função ‘ajaxComboBox’ ao evento onChange, o que fará com que toda vez que seja selecionado um novo item na ComboBox ‘estados’ esta função seja chamada com o nome do arquivo onde se encontra o conteúdo e a ComboBox de destino.

Vamos desmenbrar o envento onChange do nosso exemplo:

processCidades.php - Sera meu arquivo responsavel por receber e realizar a consulta das minhas cidades, é um arquio simples em php. Na consulta deste arquivo sera enviado uma variavel de GET elea sera $_GET['idEstado']

idEstado - É a variavel enviada por GET para o arquivo processCidades.php

cidade É a DIV que sera carregada do resultado proviniente da requisição ajax, irá exibir o resultado feito na consulta do arquivo municipio

Linha 13 até 20: Fazemos a consulta SQL alimentando nossa comboBox estado.

Abaixo o arguivo ‘processCidades.php’, responsável por pesquisar o banco de dados e retornar as informações necessárias para povoar a ComboBox de destino.

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

 
 
<?php
 
include("connect.php");
 
if ( !empty($_GET["idEstado"]) ) {
 
	$sql = "SELECT * FROM cidade WHERE idEstado=".$_GET["idEstado"]." ORDER BY nome";
	$results = mysql_query($sql);
	if(mysql_num_rows($results)){
		echo "<option value="">-- Selecione --</option>";
		while ( $row = mysql_fetch_array($results ) ) {
			echo "<option value='".$row["idCidade"]."'>".$row["nome"]."</option>";
		}
	} else {
		echo "<option value="">Nenhuma cidade encontrada.</option>";
	}
} else {
	echo "<option value="">Selecione uma Cidade</option>";
}
 
 
 
?>

Com o resultado da consulta e um laço ‘while’ imprimimos no arquivo cada tag ‘nome’ contendo o nome da cidade e um atributo ‘id’ contendo um código único para a cidade..

Em principio seria isso pessoal, qualquer duvida é só POSTAR…Abraços!

34 Responses to “Ajax ComboBox
( Alimentando ComboBox de Estado e Cidades )”

  1. Twin  on abril 22nd, 2009

    Show de Bola…..bem o que estava a procura amigo!

  2. Gil  on maio 7th, 2009

    André, uma dúvida:
    Se for usar esse form para uma busca de endereços por exemplo por estado e cidades:

    Depois de enviado os dados do form como fazer para esse mesmo combo fique com os dados selecionados depois da busca e permita fazer novas buscas com os dados do select ?

    Ex: SP - São Paulo (resultados de endereços) -> SP - Mogi

  3. admin  on maio 7th, 2009

    Existe varias formas, mas acredito que a melho seria enviar estes dados via AJAX usando a biblioteca jQuery, xHconn ou alguma de sua preferencia, assim não dando reflesh na pagina.

  4. Gustavo  on junho 29th, 2009

    Como faço para restar o id da cidade escolhida em outras páginas?

  5. admin  on julho 2nd, 2009

    Amigo, voce gostaria de imprimir??? se for basta apenas dar um echo no GET
    exemplo echo”".$_GET['$_GET["idEstado"]‘].”";

    qualquer duvida posta é so postar!

  6. Alberto  on julho 18th, 2009

    Depois que listei o estado e escolhi a cidade, como faço pra passar a cidade para um programa de pesquisa ou de cadastro para o mysql?

    Obrigado

  7. admin  on julho 21st, 2009

    Como as informações é enviadas via GET, basta apenas voce fazer seu INCLUDE ou SELECT SQL no arquivo de processamento, bem caso não sacie sua duvida me envie um email com mais expecificações que eu irei lhe ajudar, um abraço amigo.

  8. Eli Lopes  on julho 30th, 2009

    Onde faço download da micoxAjax.js?

  9. admin  on agosto 4th, 2009

    Opa, voce pode copiar a bilbioteca na propia pagina do Micox……………em http://www.elmicox.com/category/ajax/

    Abraço qualquer duvida grita ae !

  10. Manoel Filho  on agosto 12th, 2009

    Parabéns pelo site. Muito bom

    Você pode me dizer como está a estrutura das tabelas das cidades e dos estados no seu banco mysql?

    Outro problema: Quando seleciono um estado não está chamando a função? Já olhei todo o código. Pode ajudar?

  11. admin  on agosto 19th, 2009

    Bem a estrutura acabei adicionando no POST, bem e a segunda questão você pode postar parte do seu codigo no blog ou me enviar por email que com certeza irei le ajudar.

    Abraço amigo

  12. manoel  on agosto 22nd, 2009

    Muito bom o conteúdo do teu site.
    Pode me dizer onde consigo o arquivo micoxAjax ??
    Não está no link que você disse pro camarada aí em cima.

    Abraço

  13. Anderspn Pereira  on agosto 23rd, 2009

    Você tem um combox de 3 niveis por exemplo estados-> cidades-> bairros por exemplo

  14. admin  on agosto 23rd, 2009

    Bem amigo pronto não tenho mas é bem simples, basta acrecentar no evento onChange da 2 combobox uma outra requisição em ajax para uma terceira combo.

    qualquer duvida grite, mande um email ou até mesmo POST no BLOG

  15. Giovani  on agosto 26th, 2009

    Gostaria de saber, no caso de 3 níveis (Estado, Cidade e Bairro), como fazer para limpar a combo do Bairro, quando mudar de estado.
    Eu já consegui implementar no OnChange da Cidade para carregar o Bairro, mas quando muda o estado só limpa o combo cidade ;D

    Parabéns pelo site.

  16. admin  on agosto 28th, 2009

    No envento onChange do estado você pode charmar outra função para limpar o campo bairro.
    Ex:

    function limpaBairro(){
    document.getElementById(’estado’).value=”;
    }

    Bem espero que ajude, qualquer coisa é so gritar. Abraço

  17. Anapaulinha  on agosto 28th, 2009

    Olá, gostaria de saber como faz para a cidade selecionada voltar para o combo e a pessoa poder fazer a troca novamente???
    Tem como explicar, não saco mto de ajax….

    Obrigada,

  18. admin  on agosto 30th, 2009

    Pode esplicar com mais detalhes como gostaria de fazer esta funcionalidade?

  19. Anapaulinha  on agosto 31st, 2009

    Bom, queria que a pessoa escolhesse a cidade, estado, mas depois, se ela quiser alterar, esse estado e cidades já devem estar selecionador no combo para ela realizar a troca. Como faz para colocar a cidade selecionada no combo é que não sei fazer…. pode ajudar???
    Obrigada

  20. admin  on agosto 31st, 2009

    Olha não consegui compreender o que você gostaria de fazer. Desculpe!

  21. Eden Pinto Coelho  on outubro 29th, 2009

    Onde se encontram as função ajaxGet e o arquivo micoxAjax.js

  22. Micox  on janeiro 14th, 2010

    Opa admin, beleza?

    Valeu a indicação ae.
    Porém, esta versão do micoxAjax tá meio descontinuada.
    Eu atualizei ela pro ajaxGo.js.
    Já tem até uma função pra combos-selects mais fácil.
    Veja em http://www.webly.com.br/Micox/ajaxGo.htm#selects

    Se der pra atualizar os links ae…

    Valeu.

  23. Danilo  on janeiro 18th, 2010

    linha 3

    é nessa linha que eu indico a página que eu gostaria de imprimir os resultados?

    e nesse arquivo eu imprimo como??
    assim já sai:

  24. Bypeslupe  on março 7th, 2010

    Thanks for writing, I very much liked

  25. Wholesale polo shirts  on abril 22nd, 2010

    Thanks for making my morning a little bit better with this great article!!

  26. reebok nfl throwback jerseys  on abril 23rd, 2010

    One again, your articles is very good.thank you!very much.

  27. mulberry handbags  on abril 24th, 2010

    good share, great article, very usefull for us…thanks!

  28. Bad Credit Student Loans  on abril 27th, 2010

    i have enjoyed reading thank for sharing your story Greeting.

  29. atlanta cheap tickets  on abril 28th, 2010

    nice to be here…. thanks for share

  30. Carla  on maio 1st, 2010

    Ola,
    eu preciso baixar ou criar um arquivo micoxAjax.js??
    Muito obrigada..

  31. RONI FARIA  on maio 4th, 2010

    OLA ANDRE, ESTOU COM UM PROBLEMA PARECIDO SÓ QUE TENHO CIDADE E BAIRRO JÁ TENTEI VARIOS SCRIPTS PARA TENTAR ACERTAR O PROBLEMA MAS NENHUM DEU CERTO. VISITE http://WWW.PORTALIMOVEISDOINTERIOR.COM.BR NAO CONSIGO FAZER A CIDADE E BAIRRO FUNCIONAR. SERA QUE PODERIA ME AJUDAR ? PASSANDO SEU EMAIL E PASSO MEU CODIGO PARA DAR UMA OLHADA. AGRADEÇO MUITO. RONI FARIA

  32. Andre.zip  on maio 6th, 2010

    Isso você teria que baixar e usar esta biblioteca em sua aplicação

  33. RONI FARIA  on maio 6th, 2010

    qual biblioteca devo baixar ?? meu email é roniefaria@terra.com.br . o Servidor poderia nao oferecer suporte a biblioteca ou nada a ver ??

  34. SLVNPaty  on maio 11th, 2010

    Show de Bola…vlw mesmo!


Seu Comentário