0

Dispongo de un combobox para hacer el típico formulario donde eliges el país (por ejemplo España), y en el desplegable de provincia ya sólo tienes para elegir las provincias de españolas, y una vez elegido por ejemplo Gipuzkoa (como provincia), en el desplegable de ciudades te salen sólo ciudades de Gipuzkoa como pueden ser Donostia y Irún o Hernani.

PAISES y PROVINCIAS funcionan, CIUDADES no sale nada en el desplegable.

Contenido: Base de datos de 3 tablas (países, provincias, ciudades), archivos de consulta paises.php, provincias.php y ciudades.php, y una función javascript para que se vean las select en el desplegable FUNCTION.JS

Creo que el error está en el FUNCTION.JS que me falta algo para que las ciudades también se visualicen. Paises y Provincias se ven perfectamente.

Tengo en la base de datos 3 tablas:

  • Paises
  • Provincias
  • Ciudades

(Se han creado las tablas con algunos ejemplo de países, provincias y ciudades)

En el formulario HTML donde tendremos los desplegables de País, Provincia y Ciudad:

    <div>
<h2>País</h2>
<select name="paises" id="paises">
  <option value="0">Seleccione</option>
</select>
</div>

<div>
<h2>Provincia</h2>
<select name="provincias" id="provincias">
  <option value="0">Seleccione</option>
</select>
</div>

<div>
<h2>Ciudad</h2>
<select name="ciudades" id="ciudades">
  <option value="0">Seleccione</option>
</select>
</div>

Después las consultas en varios archivos php: paises.php, provincias.php y ciudades.php:

PAISES.PHP

 <?php
include ('conexion.php');
$query = $conn->query("SELECT * FROM paises");
echo '<option value="0">Seleccione</option>';
while ( $row = $query->fetch_assoc() )
{
    echo '<option value="' . $row['id_pais']. '">' . $row['nombre_pais'] . '</option>' . "\n";
}
?>

PROVINCIAS.PHP

    <?php
include ('conexion.php');
$el_pais = $_POST['pais'];
$query = $conn->query("SELECT * FROM provincias WHERE id_pais = $el_pais");
echo '<option value="0">Seleccione</option>';
while ( $row = $query->fetch_assoc() )
{
    echo '<option value="' . $row['id_provincia']. '">' . $row['nombre_provincia'] . '</option>' . "\n";
}
?>

CIUDADES.PHP

    <?php

include ('conexion.php');
$la_provincia = $_POST['provincia'];
$query = $conn->query("SELECT * FROM ciudades WHERE id_provincia = $la_provincia");
echo '<option value="0">Seleccione</option>';
while ( $row = $query->fetch_assoc() )
{
    echo '<option value="' . $row['id_ciudad']. '">' . $row['nombre_ciudad'] . '</option>' . "\n";
}
?>

Y por último la función de llamada donde creo que está el error o falta algo para que las ciudades aparezcan:

FUNCTION.JS

$(function()
{

// Lista de Paises
$.post( 'paises.php' ).done( function(respuesta)
{
    $( '#paises' ).html( respuesta );
});

// lista de Provincias  
$('#paises').change(function()
    {
        var el_pais = $(this).val();

    // Lista de Paises
    $.post( 'provincias.php', { pais: el_pais} ).done( function( respuesta )
    {
            $( '#provincias' ).html( respuesta );
        });
    });

// Lista de Ciudades
$( '#provincias' ).change( function()
{
        var pais = $(this).children('option:selected').html();
    alert( 'Lista de Provincias de ' + provincia );
});

})

¿Dónde está el error? ¿Qué falta? Gracias de antemano.

1

1 respuesta 1

2

Solo tienes que agregarle al change() de provincias la funcionalidad de buscar las ciudades te dejo mas o menos el ejemplo de como.

La idea es hacer la petición al hacer change() en provincias.

 $( '#provincias' ).change()

Luego pasarle como parametro al metodo $.post() el id de la provincia seleccionada que lo hacemos con

 { provincia: $( '#provincias' ).val()}

o también podría ser así

 { provincia: $(this).val()}

Y al final hay que obtener los valores que nos retorna la petición y agregarselos al select de ciudades

$( '#ciudades' ).html( respuesta );

$(function()
{

// Lista de Paises
$.post( 'paises.php' ).done( function(respuesta)
{
   $( '#paises' ).html( respuesta );
});

// lista de Provincias  
$('#paises').change(function()
{
    var el_pais = $(this).val();

// Lista de Paises
$.post( 'provincias.php', { pais: el_pais} ).done( function( respuesta )
{
        $( '#provincias' ).html( respuesta );
     });
});

// Lista de Ciudades
$( '#provincias' ).change( function()
{
    //var pais = $(this).children('option:selected').html();

    //Nuevo codigo
    // Lista de Ciudades
   $.post( 'ciudades.php', { provincia: $( '#provincias' ).val()} ).done( 
   function( respuesta )
    {
        $( '#ciudades' ).html( respuesta );
       alert( 'Lista de ciudades ' + respuesta);
     });

});

})

Espero te ayude amigo saludos.

2
  • Funciona perfecto. He quitado ese alert que sale, por lo demás funciona perfecto. Un saludo y gracias!
    – ret
    Commented el 10 dic. 2017 a las 18:27
  • Exelente amigo dale como respuesta correcta para que la comunidad sepa como solucionar el problema en caso de tenerlo saludos. Commented el 10 dic. 2017 a las 18:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.