Provavelmente já existem muitos tutoriais na net de como fazer uma busca por selects aninhados usando (a metodologia) ajax. Mas, como na web sempre tem gente nova chegando, e novas abordagens são sempre bem-vindas, vou mostrar como fazer uma dessas buscas de uma forma bem simples.
O que é necessário: um banco MYSQL rodando, PHP (versão 4 já da conta) e a biblioteca javascript prototype.
Tendo os ingredientes à mão, vamos criar um banco de dados com duas tabelas:
bandas: campos ID e NOME
discos: campos ID, ID_BANDA, NOME
A idéia é que a tabela bandas liste várias bandas (sendo ID chave primária), e a tabela discos vai guardar uma lista de discos referentes às bandas inseridas na outra tabela (usando ID_BANDA para referenciar a qual a banda o disco pertence).
Segue um dump do banco:
CREATE TABLE `bandas` ( `id` int(11) NOT NULL auto_increment, `nome` varchar(128) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ; -- -- Extraindo dados da tabela `bandas` -- INSERT INTO `bandas` VALUES (1, ´Iron Maiden´); INSERT INTO `bandas` VALUES (2, ´Metallica´); INSERT INTO `bandas` VALUES (3, ´Sepultura´); -- -------------------------------------------------------- -- -- Estrutura da tabela `discos` -- CREATE TABLE `discos` ( `id` int(11) NOT NULL auto_increment, `id_banda` int(11) NOT NULL, `nome` varchar(128) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ; -- -- Extraindo dados da tabela `discos` -- INSERT INTO `discos` VALUES (1, 1, ´Fear of the Dark´); INSERT INTO `discos` VALUES (2, 1, ´The Number of the Beast´); INSERT INTO `discos` VALUES (3, 2, ´Load´); INSERT INTO `discos` VALUES (4, 2, ´Master of Puppets´); INSERT INTO `discos` VALUES (5, 3, ´Chaos AD´); INSERT INTO `discos` VALUES (6, 3, ´Arise´);
Tendo feito isso, monta-se uma página com um formulário que possui dois selects. Através de uma consulta SQL feita pelo PHP ,todos os registros da tabela bandas são retornados e o primeiro select é populado, colocando o value de cada option igual ao id da banda (ele será usado para fazer a consulta SQL na tabela discos de uma banda específica).
No onchange desse select, se chama uma função javascript:
– ela vai fazer uma requisição utilizando o objeto Ajax da (biblioteca) prototype, a uma página php chamada discos.php
– discos.php consulta a tabela discos e procura os discos de uma banda específica, retornando uma string no formato registro1|registro2|registro3…
– no retorno da função, por javascript é feito um split na string retornada e, com isso, recupera-se num vetor a lista de discos. Com isso, só é necessário apagar os ítens anteriores da lista, percorrer o vetor gerado pelo split e criar para cada item dessa lista uma option e adicioná-la (appendChild()) ao select.
Segue o código da página principal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemplo de select aninhado</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript">
function buscadiscos(field){
//requisita o serviço PHP que vai listar os discos de uma banda, pelo id
new Ajax.Request(´discos.php?id=´ + $F(field), {
onSuccess: function(transport) {
//alert(transport.responseText);
$("discos").innerHTML = "";
var discos = transport.responseText.split("|");
for(var i=0; i<discos.length; i++) {
if(discos[i]=="")
continue;
var li = new Element("li").update(discos[i]);
$("discos").appendChild(li);
}
}
});
}
</script>
</head>
<body>
<h1>Exemplo - select aninhado</h1>
<form id="busca_discos" name="busca_discos" method="POST" action="#">
<label>banda:</label>
<select id="bandas" onchange="buscadiscos(this);">
<option value="-1">selecione...</option>
<?php
//conecta ao banco
$link = mysql_connect(´localhost´, ´root´, ´´);
mysql_select_db(´exemplo_select´, $link);
//monta string que seleciona todas as bandas
$sql = "SELECT * FROM bandas";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo("<option value=´" . $row["id"] . "´>" . $row["nome"] . "</option>");
}
?>
</select>
<br /><br /><br />
<label>discos:<label>
<select id="discos"></select>
</form>
</body>
</html>
Segue o código da página discos.php:
<?php
//conecta ao banco
$link = mysql_connect(´localhost´, ´root´, ´´);
mysql_select_db(´exemplo_select´, $link);
//monta string que seleciona todos os discos de uma determinada banda
$sql = "SELECT * FROM discos WHERE id_banda=" . $_GET["id"];
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo($row["nome"] . "|");
}
?>
Vale ressaltar que a maneira de discos.php retirnar os dados foi a mais simples possível – e de menor qualidade. Para melhorar o código, seria interessante retornar um XML ou retornar os dados no formato JSON (tanto o PHP5 tem métodos nativos para codificar dados em formato JSON, quando a biblioteca JSON tem para decodificar os mesmos).