Select dinâmico com PHP, Javascript e MySQL

gocorrea

Aprenda a fazer um select que, quando seu valor é alterado, é automaticamente realizado uma ação sem necessidade de usar um botão post.

[ Hits: 200.151 ]

Por: Gustavo de Oliveira Corrêa em 24/05/2005

3 0

Denuncie Favoritos Indicar Impressora

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>

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>

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
} ?>

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>

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.

Página anterior Próxima página

Páginas do artigo

   1. Introdução
   2. Primeiro exemplo
   3. Implementando com MySQL
   4. Script exemplo.php

Outros artigos deste autor

Nenhum artigo encontrado.

Leitura recomendada

Dicas simples para dar mais usabilidades aos formulários

Verificando a consistência de um formulário com JavaScript

Verificando a consistência de CPF e CNPJ em um formulário com JavaScript

Formulários HTML: Problemas com campos desabilitados?

Por que o Javascript é ruim em matemática?

Comentários

[1] Comentário enviado por ygorth em 25/05/2005 - 09:54h

Muito legal seu artigo. Já precisei disso antes e sempre tive problema.

0 0

[2] Comentário enviado por jllucca em 25/05/2005 - 13:41h

Tipo esse "truque" tem mais haver com javascript do que php. Mas, é realmente útil.

0 0

[3] Comentário enviado por kandrus em 26/05/2005 - 23:50h

Muito util esta dica e tava atras de algo assim

1 0

[4] Comentário enviado por Hernando em 27/05/2005 - 09:46h

Bom mesmo mais tenho um outro que faz um triple combo box dinamico que interage php + mysql + javascript... Mesmo assim valeu!!!

Abraços...

Ps.:Numa melhor posto o meu triple combo box!!! Onde seguindo a lógica pode se chegar a infinitos combos...

0 0

[5] Comentário enviado por leofsouza em 31/12/2005 - 16:41h

Como faço para que apos selecionar o estado os outros campos do formulario nao sejam apagado... por exemplo: nome e outras coisas. pq quando clico no estado ele atualiza o documento e apaga a os outros dados.

0 0

[6] Comentário enviado por leomuriae em 05/02/2007 - 09:54h

Sr.Gustavo,
Teoricamente seria fantástico, porém, há um erro terrível cometido neste script.
Quando incrementamos com mysql, até a hora de selecionar tudo bem, ele vai perfeitamente, porém, na hora de transferir as informações vira o SAMBA DO CRIOLO DOIDO. Ele não passa as informações que foram selecionadas e sim números completamente diferentes das opções selecionadas.
Por gentileza coloca o script onde, dê para passar as informções corretamente.
Grato pela atenção,
Léo

0 0

[7] Comentário enviado por gocorrea em 05/02/2007 - 11:39h

Leo, obrigado pelo comentário mas gostaria de lembrar que esse artigo é muito antigo, e eu conhecia muito pouco sobre javascript, não recomendo que isso seja feito dessa maneira, recomendo que você use ajax. Quanto ao seu problema, veja essa parte do codigo:

while ($row = mysql_fetch_row($result)){
$city = $row[1];
$id2 = $row[0];
echo "<option value=$id2> $city </option>";
}

no meu caso eu precisava que fosse transferido números ao invés do nome da cidade, uma vez que cada cidade esta associado a um número, para min ficou mais fácil trabalhar assim. Mas como você deseja que seja transferido o nome da cidade faça assim:

while ($row = mysql_fetch_row($result)){
$city = $row[1];
echo "<option value=$city> $city </option>";
}

Enfim, não é nenhum erro terrível nesse script.
Gustavo.

0 0

[8] Comentário enviado por leomuriae em 05/02/2007 - 17:12h

Obrigado Senhor Gustavo, novamente salvando o dia, este é o cara, foi mal pela exagero, era só pra chamar atenção e alguém me socorrer.
Porém, só mais uma dúvida, o estado vem descrito ainda como número, e eu gostria de repassar as informção de estado como letras, entende?
Salve a gente outra vez...

0 0

[9] Comentário enviado por gocorrea em 06/02/2007 - 08:19h

Basta substituir os campos value das opções do select pelo nome das cidades aos inves de números:

<html>
<body>
<select name="select" size=1 value=2 onChange="getStates(this);">
<option value="">selecione o estado</option>
<option value="Minas Gerais"> Minas Gerais </option>
<option value="São Paulo"> São Paulo </option>
<option value="Rio Grande do Sul"> Rio Grande do Sul </option>
<option value="Amazonas"> Amazonas </option>
<option value="Pernambuco"> Pernambuco</option>
</select>
</body>
</html>

0 0

[10] Comentário enviado por leomuriae em 06/02/2007 - 13:43h

Não, meu velho!!!
Tô falando encrementando com mysql, não é o estático não, o estático já fiz e deu certinho igual dedo no nariz...
Quando der nos responda e ajude a salvar dia novamente.
Valew brother...

0 0

[11] Comentário enviado por gocorrea em 07/02/2007 - 12:03h

ah cara vc vai ter reestruturar seu bando de dados para que na tabela cidades tenha o campo estado e cidade, e quando for fazer a consulta no mysql faça assim

$query = "select * from cidades where estado='$estado'";

lembrando que você deve alterar o select de estados como mostrado no comentário anterior.

0 0

[12] Comentário enviado por comfaa em 28/10/2008 - 11:42h

muito bom !!

0 0

[13] Comentário enviado por hudson.carlos em 20/03/2009 - 20:53h

$conexao=mysql_pconnect("localhost","Hudson","123456") or die("CONEXÃO INATIVA" . mysql_error());
mysql_select_db("brasil",$conexao) or die("NOME OU SENHA INVÁLIDOS!" . mysql_error()); O Internet Explorer retorna erro afirmando que falta o objeto solicitado na linha correspondente a esta variável, por isso ele não retorna o segundo combo. Como resolver este problema? Se puder me ajudar, agradeço, pois estou precisando de um sistema de combos múltiplos. Reitero que todas as modificações que são relatadas nos comentários foram feitas, e nem por isso o erro deixou de aparecer...

0 0

[14] Comentário enviado por rodmaru em 18/02/2010 - 00:29h

Ola

gostei muito da simplicidade do artigo.
estou precisando adicionar mais um select mas estou tendo dificuldade para implementa-lo.
poderia me dar uma dica?

obrigado

0 0

[15] Comentário enviado por Gabriel_Silva em 29/01/2011 - 17:41h

muito bom

0 0

[16] Comentário enviado por albertguedes em 23/02/2011 - 01:45h

Cara, chorei ao ler seu artigo. Não sabe como eu estava atrás de uma solução simples dessa.

Saiba que isso me ajudou pacas. Valeu amigo ! Abraços.

0 0

[17] Comentário enviado por RR em 28/03/2011 - 23:19h

Sabe uma coisa que adoraria aprender?

Criar um site do zero, tipo, instalar Apache, php, mysql, criar modelos (templates), tudo em bancos de dados, albuns de fotos, sem que tem diversas apostilas na net... Porém seria interessante por usar essa ideia e reformar o site... e os usuarios/ colaboradores poderiam dar ideias, e ajudar a deixar o Viva o Linux mais com a cara da comunidade..... e com essa atividade poderiam ser criados video aulas / artigos explicando passo a passo a implementação destes itens....

E vocês usuários, o que pensam desta idéia?

0 0

[18] Comentário enviado por rrh em 02/08/2011 - 18:12h

Como ficaria para implementar mais um select? Exemplo: Estado > Cidade > Ruas

0 0

[19] Comentário enviado por lucianomoraes69 em 13/03/2013 - 07:00h

Muito obrigado Gustavo.
Muito interessante e bom o seu post.
Ainda que você conhecia pouco de javaScript, na época em que escreveu, o seu post é muito importante.
Mas parece que tem gente que estava com inveja, falando em "erro grave", etc. Um estressado, é o cara que
escreveu desta maneira.

1 0