AJAX (Jquery) - Populando ComboBox, 22/09/2010

Aprenda a popular um combo de cidades selecionando o estado. Atenção é importante ter um conhecimento básico de PHP, lógica de programação e SQL. É necessário ter PHP, Apache ou IIS e MYSQL apartir da versão 5.0 instalados.

A primeira coisa a ser feita será criar o banco de dados e suas tabelas, para isso copie o script abaixo e execute em algum cliente de banco MYSQL.



-- Create schema teste
--

CREATE DATABASE IF NOT EXISTS teste;
USE teste;

--
-- Definition of table `estados`
--

DROP TABLE IF EXISTS `estados`;
CREATE TABLE `estados` (
`id` int(10) unsigned NOT NULL auto_increment,
`pais_id` int(10) unsigned NOT NULL,
`nome` varchar(60) NOT NULL,
`sigla` char(3) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `Index_2` (`pais_id`,`nome`),
KEY `Index_3` (`pais_id`),
CONSTRAINT `FK_estados_1` FOREIGN KEY (`pais_id`) REFERENCES `paises` (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `estados`
--

/*!40000 ALTER TABLE `estados` DISABLE KEYS */;
INSERT INTO `estados` (`id`,`pais_id`,`nome`,`sigla`) VALUES
(1,1,'BAHIA','BA'),
(2,1,'SERGIPE','SE'),
(3,1,'SÃO PAULO','SP'),
(4,1,'RIO DE JANEIRO','RJ'),
(5,2,'NEW YORK','NY');
/*!40000 ALTER TABLE `estados` ENABLE KEYS */;
--
-- Definition of table `paises`
--
DROP TABLE IF EXISTS `paises`;
CREATE TABLE `paises` (
`id` int(10) unsigned NOT NULL auto_increment,
`nome` varchar(50) NOT NULL,
`sigla` varchar(3) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `Index_2` USING BTREE (`nome`),
UNIQUE KEY `Index_3` (`sigla`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `paises`
--

/*!40000 ALTER TABLE `paises` DISABLE KEYS */;
INSERT INTO `paises` (`id`,`nome`,`sigla`) VALUES
(1,'BRASIL','BR'),
(2,'ESTADOS UNIDOS','EUA');

Proximo passo, criar um arquivo de conexão como banco de dados como nome conexao.php.

Próximo passo, criar a página index.php.

Populando ComboBox com AJAX ( Pesquisa de estados )

Utilizando Framework JQuery

Pesquisa

Estado:
Selecione o país id?>">nome?>




Cidade:
-- Primeiro selecione o estado --

Próximo passo, baixar a biblioteca Jquery e salvar com o nome jquery.js em uma pasta com o nome js no mesmo diretório do projeto.

Ex: js/jquery.js

Próximo passo será criar o arquivo montacombo.php que será requisitado quando selecionarmos o estado. Através desse arquivo iremos fazer uma consulta no banco na tabela onde estão as cidades para popularmos o combo cidades.


< ? php

header("Content-Type: text/html; charset=ISO-8859-1",true); require_once('conexao.php');

if ($_REQUEST['pais_id'] != ''){
$sql = " SELECT ";
$sql.= " e.id, ";
$sql.= " e.nome ";
$sql.= " FROM ";
$sql.= " estados e,";
$sql.= " paises p";
$sql.= " WHERE ";
$sql.= " p.id = e.pais_id ";
$sql.= " AND e.pais_id = " . $_REQUEST['pais_id'];
$sql.= " ORDER BY e.nome";

$rs = mysql_query($sql) or die('Falha na Consulta');
$combo = "Selecione";

while ($row = mysql_fetch_object($rs)) {
$combo.= "id . "'>" . $row->nome . "";
}

echo $combo;
}

?>