Preenchendo um SELECT dinamicamente com PHP + JQuery

junho 24, 2009 às 11:38 · Arquivado em JQuery

Este é um problema que muitos inicinates em PHP enfrentam no “caminho das pedras“, então resolvi postar este tópico que esclarece esse problema. O exemplo mais classico que existe por ai é o de “Estados e Cidades” mas só pra sair da tradição vou resolver usando “Marcas e Carros” o que também não foge tanto assim da regra (droga).

Monte uma tabela de estados no seu DB com os seguintes campos:

id_estado, estado; e nomeie a tabela como “estados”

Agora monte a tabela das cidades com os seguintes campos:

id_cidade, id_estado,cidade; e a nomeie como “cidades”

<html>

<head></head>

<body>

<select name=”listTurmas” id=”listTurmas” onChange=”Dados(this.value);”>
<option value=”0″>Turmas …</option>
<?php
require_once(“../conecta.php”);
$sql = “SELECT * FROM turmas”;
$query=mysql_query($sql);
while($res = mysql_fetch_array($query))
{
echo “<option value='”.$res[‘id_turma’].”‘>”.$res[‘turma’].”</option><br>”;
}
?>
</select>


<select name="listCidades" class="btn-slide" id="listCidades">
<option value="0">Cidades ...</option>


<?php  require_once("../conecta.php"); // função de  conexao ao banco


$sql = "SELECT * FROM estados"; $query=mysql_query($sql); 


while($res = mysql_fetch_array($query)) 


{




echo '<option value='".$res['id_estado']."'>".$res['estado']."</option>';// o tecnica está nesta linha, observe que o php gera uma tag HTML com os dados de cada estado até que termine o while


}


?>


</select>


</body>


</html


Pronto, teste o código e veja oque acontece, …, aconteceu que o select “listEstados” está preenchido com um lista dos estados cadastrados no banco, agora vamos pra segunda etapa do nosso exemplo,  iremos preencher o select “listCidades” com as cidades que pertencem ao estado selecionado no primeiro select.


Faça um novo arquivo no NotPad++ e salve-o com o nome de “procura_cidades.php” e digite o código a seguir:


<?php


require_once(“conecta.php”); //conexao ao banco de dados


extract ($_POST);


$sql = “SELECT * FROM cidades WHERE id_estado=”.id_estado;


$query = mysql_query($sql);


while($res = mysql_fetch_array($query))


{


echo “<option value='”.$res[‘id_cidade’].”‘>”.$res[‘cidade’].”</option><br>”;


}


?>







Este é o código que retorna as cidades de acordo com o id_estado passado para o código SQL.


Salve o arquivo e vote na página html onde está o formulario com os selects.


No topo da pagina, nates mesmo da tag <html> digite esse cogido JQuery a seguir.


<script type=”text/javascript” src=”jquery.js”></script>


<script language=”javascript” type=”text/javascript”>


 $(document).ready(


 function()


 {


  $(“select[@id=listEstados]”).change( //ao selecionar um item no select a funcao é acionada


 function()


 {


  $(‘#listCidades’).html(‘<option value=”sda”>Procurando :::::::</option>’);


  $.post(‘procura_cidades.php’,{id_estado: $(this).val() }, //envia o código do estado via POST atraves da variavel “id_estado” para o arquivo “procura_cidades.php”


   function(resposta)


 {


  $(‘#listCidades’).html(resposta); //retorna o conteudo gerado em “procura_cidades.php” para dentro do select listCidades.


  });


  });


 


 });//fim ready 


</script>


E pronto, creio eu que o esquema já deve estar funcionando, qualquer coisa comentem.

Deixe um comentário