Hoje veremos como criar aqueles famosos combos dinâmicos (ou menus “select
options”) tipo cidades-estados (o 2º ‘combo’ altera-se conforme a opção selecionada
no 1º) usando PHP, o banco de dados Mysql e apenas um comando javascript.
Siga os passos:
Primeiro crie em seu banco de dados uma tabela de estados:
Siga os passos:
Primeiro crie em seu banco de dados uma tabela de estados:
CREATE TABLE `estados` (
`id` int(10)
NOT NULL AUTO_INCREMENT,
`nome`
varchar(50) NOT NULL,
`uf` char(2)
NOT NULL,
PRIMARY KEY
(`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT
CHARSET=latin1;
E a seguir uma tabela de cidades:
CREATE TABLE `cidades` (
`id` int(10)
NOT NULL AUTO_INCREMENT,
`nomeCidade`
varchar(100) NOT NULL,
`idEstado`
int(10) DEFAULT NULL,
PRIMARY KEY
(`id`),
UNIQUE KEY
`cidade` (`nomeCidade`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT
CHARSET=latin1;
-
Obs: Não
esqueça a coluna “idEstado”; ela é que relaciona as duas tabelas, ok?
Agora insira
alguns registros para teste (se quiser, aproveite e treine 1 pouco tb sua SQL, fazendo
algumas consultas).
A seguir vamos ao
código PHP; como é realmente bem simples já reproduzi abaixo:
<?php
//
conexao
$consulta =
$db->prepare("select * from estados");
$consulta->execute();
?>
<!DOCTYPE
html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Teste
selects dinamicos</title>
<script
type="text/JavaScript">
</script>
</head>
<body>
<form
action="" method="post" name="form1"
id="form1">
<label
class="control-label"></label>
<label>
<select
name="estado" id="estado"
onChange="submit(estado.value)" >
<option value="">Selecione o
estado:</option>
<?php
while($row
= $consulta->fetch(PDO::FETCH_OBJ)){
?>
<option value="<?php echo
$row->id;?>"><?php echo $row->uf;?></option>
<?php
}
?>
</select>
</label>
<?php
if(isset($_POST['estado'])){
$idEstado=$_POST['estado'];
$consulta2 =
$db->prepare("select * from cidades where IDestado='$idEstado'");
$consulta2->execute();
?>
<label>
<select
name="cidades" id="cidades"
onChange="submit(cidades.value)">
<option
value="">Selecione a cidade: </option>
<?php
while($row2
= $consulta2->fetch(PDO::FETCH_OBJ)){
?>
<option
value="<?php echo $row2->id;?>"><?php echo
$row2->nomeCidade;?></option>
<?php
} }
?>
</select>
</label>
<br
/>
</form>
</body>
</html>
E é isso aí! Observe
que a “mágica” toda é feita pelo comando onChange="submit(estado.value)", que envia o “value” do estado selecionado (no caso, o “ID”)
para a 2ª consulta ($consulta2).
Caso queira mais
dicas sobre relacionamento de tabelas, veja aqui:
