Estoy haciendo un select dependiente de país/provincia. Necesito que al seleccionar el país muestre en el segundo select las distintas provincias de ese país que existen en la tabla usuarios. La tabla en base de datos es algo así:
usuario | pais | provincia
Este es el código que tengo, no tengo mucha idea de Javascript ni de Ajax, lo he hecho viendo un vídeo, pero no funciona. A ver si me podéis ayudar.
<!DOCTYPE html>
<html>
<head>
<title>Combo 3 Niveles</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<form method="post" action="buscar.php">
<select name="paises" id="paises" >
<option value="">País</option>
<option value="España">España</option>
<option value="Argentina">Argentina</option>
</select>
<select name="provincias" id="provincias">
</select>
<input type="submit" value="BUSCAR">
</form>
<script>
$(document).ready(function(e){
$("#paises").change(function(){
var parametros= "pais="+$("#paises").val();
$.ajax({
data: parametros,
url: 'ajax_provincias.php',
type: 'post',
beforeSend: function () {
alert("Enviando")
},
succes: function(response) {
$("provincias").html(response);
},
error: function(){
alert("error")
}
});
})
})
</script>
</body>
</html>
ajax_provincias.php
<?php
include 'includes/dbopen.php';
if(isset($POST['pais'])):
$u=$db->query("SELECT distinct provincia FROM usuarios WHERE pais='$POST['pais']' ORDER BY provincia ASC");
$html="";
foreach ($u as $value)
$html.="<option value='".$value['provincia']."'>".$value['provincia']."</option>";
echo $html;
echo "No hay post";
endif;?>