Skip to main content
1 de 3

Select dependiente de 3 niveles con Ajax y MYSQL

Estoy haciendo un select dependiente de país/provincia/ciudad. 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. Y al seleccionar una provincia muestre en el tercer select las ciudades que existen en la tabla para esa provincia. La tabla es algo así:

usuario | pais | provincia | ciudad

Este es el código que tengo para hacer la primera parte, la de seleccionar el país y que muestre las provincias. 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;?>