Exemplo 1:
Tabelas relacionadas (ufs e cidades)
//ufs
CREATE TABLE `ufs` (
`ufid` int(11) NOT NULL AUTO_INCREMENT,
`uf` varchar(2) NOT NULL,
PRIMARY KEY (`ufid`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8
//cidades
CREATE TABLE `cidades` (
`cidadeid` int(11) NOT NULL AUTO_INCREMENT,
`ufid` int(11) NOT NULL,
`cidade` varchar(45) NOT NULL,
PRIMARY KEY (`cidadeid`),
KEY `ufpkufid_idx` (`ufid`),
CONSTRAINT `ufpkufid` FOREIGN KEY (`ufid`) REFERENCES `ufs` (`ufid`)
ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8
Com essas tabelas criadas e preenchidas crie no PHP uma conexão com seu banco de dados MySQL, com PDO dessa forma:
<?php
$pdo = new PDO('mysql:dbname=generics;host=localhost', 'root', 'senha',
array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
dbname = "nome do seu banco de dados"
host = "ip de conexao do seu banco de dados ou localhost se banco for local (127.0.0.1)"
aonde está 'root' é o usuário do banco e 'senha' é a senha desse usuário para conectar no seu banco.
Esse conexão vai ser utilizada em todo exemplo, então, crie um arquivo separado com o nome de conn.php
(o nome pode ser de sua preferência), e coloque o código no mesmo.
PHP
Nome: combos.php
<?php include 'conn.php'; ?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Combos Dependentes</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<select id="CmbUF">
<option value="">Selecione a UF</option>
<?php
foreach($pdo->query('SELECT ufid, uf FROM ufs order by uf') as $row){
echo '<option value="'.$row['ufid'].'">'.$row['uf'].'</option>';
}
?>
</select>
<select id="CmbCidade">
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#CmbUF').change(function(e) {
$('#CmbCidade').empty();
var id = $(this).val();
$.post('call_cidades.php', {ufid:id}, function(data){
var cmb = '<option value="">Selecione a Cidade</option>';
$.each(data, function (index, value){
cmb = cmb + '<option value="' + value.cidadeid + '">' + value.cidade + '</option>';;
});
$('#CmbCidade').html(cmb);
}, 'json');
});
});
</script>
</body>
</html>
A mesma renderizada pelo navegador ficará assim:
O carregamento da UF já acontece por padrão com o carregamento dessa página, ao clicar na UF e escolher alguma na lista a mesma dispara um evento no select (onchange) e enviará informações de requisição Ajax para o servidor. Tudo isso usando o jQuery com $.post.
O arquivo PHP responsável em receber tal requisição tem esse layout:
Nome: call_cidades.php
<?php
if (isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && $_SERVER["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest"){
include 'conn.php';
$ufid = filter_input(INPUT_POST, 'ufid', FILTER_SANITIZE_NUMBER_INT);
if ($ufid){
$query = $pdo->prepare('SELECT cidadeid, cidade FROM cidades where ufid=? ORDER BY cidade');
$query->bindParam(1, $ufid, PDO::PARAM_INT);
$query->execute();
echo json_encode($query->fetchAll());
return;
}
}
echo NULL;
Após seu processamento, o mesmo retornar um JSON nesse formato:
[{"cidadeid":"5","0":"5","cidade":"BOM JARDIM","1":"BOM JARDIM"},{"cidadeid":"4","0":"4","cidade":"CAMBUCI","1":"CAMBUCI"},{"cidadeid":"3","0":"3","cidade":"RIO DE JANEIRO","1":"RIO DE JANEIRO"}]
Esse JSON vai ser trabalhado no $.each do jQuery carregando o select CmbCidade, e qualquer escolha será carregado a lista referente aquela UF.
Exemplo 2:
Utilizando o plugin Jquery CascadeSelect podemos ter o mesmo efeito do Exemplo 1, fazendo alterações minimas no Combo.php
e Call_Cidades.php
. Esse plugin utiliza HTTP Método GET
e tem uma peculiaridade no retorno da informação (utiliza label
e value
para o preenchimento do select
dependente no formato JSON)
PHP
Nome: combo2.php
<?php include 'conn.php'; ?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Combos Dependentes</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<!--https://code.google.com/p/jquery-cascade/-->
<script src="jquery.cascade-select.js" type="text/javascript"></script>
</head>
<body>
<select id="CmbUF">
<option value="">Selecione a UF</option>
<?php
foreach($pdo->query('SELECT ufid, uf FROM ufs order by uf') as $row){
echo '<option value="'.$row['ufid'].'">'.$row['uf'].'</option>';
}
?>
</select>
<select id="CmbCidade">
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#CmbUF').cascade({
source: "call_cidades2.php",
cascaded: "CmbCidade",
extraParams: { ufid: function(){ return $('#CmbUF').val(); } },
dependentLoadingLabel: "Carregando Cidades ...",
dependentNothingFoundLabel: "Não existe cidades",
dependentStartingLabel: "Selecione a UF",
});
});
</script>
</body>
</html>
Nome: call_cidades2.php
<?php
if (isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && $_SERVER["HTTP_X_REQUESTED_WITH"] === "XMLHttpRequest"){
include 'conn.php';
$ufid = filter_input(INPUT_GET, 'ufid', FILTER_SANITIZE_NUMBER_INT);
if ($ufid){
$query = $pdo->prepare('SELECT cidadeid as value, cidade as label FROM cidades where ufid=? ORDER BY cidade');
$query->bindParam(1, $ufid, PDO::PARAM_INT);
$query->execute();
echo json_encode($query->fetchAll());
return;
}
}
echo NULL;
Obs: No Call_Cidades.php
tem vários detalhes de mudança:
Acredito que no Exemplo 2 fica mais tranquilo as alterações.