Dropdown dinâmico PHP

Galera, tenho um dropdown que gostaria de alimentá-lo com dados vindos do banco de dados, no caso, UF. E a partir do momento que a pessoa seleciona-se um UF, desse um SELECT no meu banco de dados e alimenta-se o outro dropdown com as Cidades deste UF.

Sei que é possível fazer com AJAX, porém não consigo acertar a sintaxe.

Algum exemplo?

1 curtida

Seria no caso uma pagina:

<?php
	$pdo  = new PDO('mysql:host=localhost;dbname=muchiutt', 'root', 'senha');
	$stmt = $pdo->prepare('select ufid, sigla from uf order by sigla');
	$stmt->execute();
	$resultUf = $stmt->fetchAll(PDO::FETCH_CLASS);
	$stmt->closeCursor();
?>
<html ng-app="app">
<head>
	<title></title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>	
</head>
<body>
<div>
  	<select id="uf" name="uf">
  		<option value="">Escolha a Uf</option>
  		<?php foreach ($resultUf as $uf) : ?>
  			<option value="<?php echo $uf->ufid;?>"><?php echo $uf->sigla;?></option>
  		<?php endforeach; ?>
  	</select>
  	<select id="cidade" name="cidade">
  	</select>
  	<script type="text/javascript">
  		$(document).ready(function()
  		{
  			$("#uf").change(function()
  			{
  				var value = $(this).val();
  				$.post("req.php", {ufid:value}, function(result){
  					$("#cidade").empty();
  					if (result)
  					{
  						var options = '';
  						$.each(result, function(i,v)
  						{
  							options = options + '<option value="'+ v.cidadeid +'">'+ v.descricao +'</option>'
  						});
  						$("#cidade").html(options);
  					}
  				}, "json");
  			});
  		})
  	</script>
</div>
</body>
</html>
<?php
	unset($pdo);
?>

E na requisição Ajax:

<?php
	$pdo  = new PDO('mysql:host=localhost;dbname=muchiutt', 'root', 'senha');
	$stmt = $pdo->prepare('select cidadeid, descricao from cidade where ufid=? order by descricao');
	$stmt->bindValue(1, ((int)$_POST['ufid']), PDO::PARAM_INT);
	$stmt->execute();
	$resultCidade = $stmt->fetchAll();
	$stmt->closeCursor();
	echo json_encode($resultCidade);

Esse exemplo está completo mediante layout dessas tabelas:

Tabela de Unidade Federativa:

delimiter $$

CREATE TABLE `uf` (
  `ufid` int(2) NOT NULL AUTO_INCREMENT,
  `sigla` varchar(2) DEFAULT NULL,
  `descricao` varchar(40) DEFAULT NULL,
  PRIMARY KEY (`ufid`),
  UNIQUE KEY `sigla` (`sigla`)
) ENGINE=InnoDB AUTO_INCREMENT=28 DEFAULT CHARSET=utf8$$

Tabela de Cidade

delimiter $$

CREATE TABLE `cidade` (
  `cidadeid` int(4) NOT NULL AUTO_INCREMENT,
  `ufid` int(2) DEFAULT NULL,
  `descricao` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`cidadeid`),
  KEY `ufid` (`ufid`),
  CONSTRAINT `cidade_ibfk_1` FOREIGN KEY (`ufid`) REFERENCES `uf` (`ufid`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=9715 DEFAULT CHARSET=utf8$$