Select dinâmico com PHP, Javascript e MySQL
Aprenda a fazer um select que, quando seu valor é alterado, é automaticamente realizado uma ação sem necessidade de usar um botão post.
Parte 2: Primeiro exemplo
Vamos supor que se deseje fazer um select com os nomes dos estados e
quando ele é escolhido, automaticamente aparece um novo select com
o nome das cidades. Vamos chamá-lo de exemplo.php. Desta forma, nosso
primeiro select ficaria assim:
<html>
<body>
<select name="select" size=1 value=2 onChange="getStates(this);">
<option value="">selecione o estado</option>
<option value="1"> Minas Gerais </option>
<option value="2"> São Paulo </option>
<option value="3"> Rio Grande do Sul </option>
<option value="4"> Amazonas </option>
<option value="5"> Pernambuco</option>
</select>
</body>
</html>
<body>
<select name="select" size=1 value=2 onChange="getStates(this);">
<option value="">selecione o estado</option>
<option value="1"> Minas Gerais </option>
<option value="2"> São Paulo </option>
<option value="3"> Rio Grande do Sul </option>
<option value="4"> Amazonas </option>
<option value="5"> Pernambuco</option>
</select>
</body>
</html>
O que não deve ser novidade para ninguém, exceto pelo onChange="getStates(this);". Isso fará que quando o valor da caixa mude, seja executado um javascript chamado getStates:
<Script Language="JavaScript">
function getStates(what) {
if (what.selectedIndex != '') {
var estado = what.value;
document.location=('exemplo.php?estado=' + estado);
}
}
</Script>
function getStates(what) {
if (what.selectedIndex != '') {
var estado = what.value;
document.location=('exemplo.php?estado=' + estado);
}
}
</Script>
O script enviará para o cabeçalho o valor do select colocando na variável estado. Agora entra a parte em php. Que ficará assim:
<?php
// isso faz com que o valor da variável estado que foi enviada ao cabeçalho seja armazenada em $estado
$estado=$_GET['estado'];
if ($estado==1){ ?>
<select name="cidade" size=1>
<option value="">selecione sua cidade</option>
<option> Belo Horizonte </option>
<option> Uberlândia </option>
<option> Ipatinga </option>
<option> Juiz de Fora </option>
<option> Pequi </option>
</select>
<?php
}
if ($estado==2){ ?>
<option value="">selecione sua cidade</option>
<select name="cidade" size=1>
<option> São Paulo </option>
<option> Santos </option>
<option> Campinas </option>
<option> Guarulhos </option>
<option> Osasco </option>
</select>
<?php
} ?>
// isso faz com que o valor da variável estado que foi enviada ao cabeçalho seja armazenada em $estado
$estado=$_GET['estado'];
if ($estado==1){ ?>
<select name="cidade" size=1>
<option value="">selecione sua cidade</option>
<option> Belo Horizonte </option>
<option> Uberlândia </option>
<option> Ipatinga </option>
<option> Juiz de Fora </option>
<option> Pequi </option>
</select>
<?php
}
if ($estado==2){ ?>
<option value="">selecione sua cidade</option>
<select name="cidade" size=1>
<option> São Paulo </option>
<option> Santos </option>
<option> Campinas </option>
<option> Guarulhos </option>
<option> Osasco </option>
</select>
<?php
} ?>
Bom... acho que você já entendeu, para cada valor do select irá aparecer outro com as cidades correspondentes. Basta agora completar com os outros valores. Pronto! Temos aí um select dinâmico bem simples. Mas ele está com um problema: quando se seleciona o estado, ao invés dele permanecer com o nome do estado ele volta para "selecione o estado". Para resolver isso basta trocar a linha "$estado=$_GET['estado'];" de lugar e mudar o primeiro select, ficando assim:
<?
$estado=$_GET['estado'];
?>
<select name="select" size=1 value="2" onChange="getStates(this);">
<option value="">selecione o estado</option>
<option value="1" <? if ($estado==1){ echo "SELECTED";} ?> > Minas Gerais </option>
<option value="2" <? if ($estado==2){ echo "SELECTED";} ?> > São Paulo </option>
<option value="3" <? if ($estado==3){ echo "SELECTED";} ?> > Rio Grande do Sul </option>
<option value="4" <? if ($estado==4){ echo "SELECTED";} ?> > Pará </option>
<option value="5" <? if ($estado==5){ echo "SELECTED";} ?> > Recife </option>
</select>
$estado=$_GET['estado'];
?>
<select name="select" size=1 value="2" onChange="getStates(this);">
<option value="">selecione o estado</option>
<option value="1" <? if ($estado==1){ echo "SELECTED";} ?> > Minas Gerais </option>
<option value="2" <? if ($estado==2){ echo "SELECTED";} ?> > São Paulo </option>
<option value="3" <? if ($estado==3){ echo "SELECTED";} ?> > Rio Grande do Sul </option>
<option value="4" <? if ($estado==4){ echo "SELECTED";} ?> > Pará </option>
<option value="5" <? if ($estado==5){ echo "SELECTED";} ?> > Recife </option>
</select>
Assim a variável estado será lida antes e pode-se fazer com que o select continue com a opção escolhida através do SELECTED. Pronto. Deixarei o script completo esta disponível para download.
Vamos agora implementá-lo para que funcione junto com o MySQL.