Lista dinámica de provincias y regiones con AJAX, JSON y JQuery

Hoy publico un ejercicio JavaScript en la misma línea que el curso de Node.js sin palabras que, por cierto, ya podéis encontrar en este mismo blog.

Logo de jQuery

Como ya habréis comprobado, estos ejercicios tienen sólo código fuente porque están pensados para mentes desarrolladoras. ¿Qué os parecen?

Bueno, hoy vamos construir un select dinámico de regiones -o comunidades autónomas, en el caso de España-, tal que cuando el usuario selecciona una de ellas se despliega otro select con las provincias correspondientes. Por ejemplo, si el usuario selecciona Catalunya, en la lista de las provincias se ve Barcelona, Tarragona, Lleida y Girona.

Que el usuario elige Aragón, pues nada oye, se ven las provincias Zaragoza, Huesca y Teruel. Y así sucesivamente…

Esto lo hacemos con AJAX para que no se vea la interacción con el servidor, o sea, para esconder la petición HTTP GET que pide la ejecución del proceso PHP que calcula las provincias. Nos apoyamos una vez más en el framework JQuery, y utilizamos la función $.getJSON para cargar dinámicamente los datos.

Por simplicidad, por motivos didácticos, el código PHP de ejemplo no se comunica con ninguna base de datos; los datos de las provincias se representan en un array. Dicho todo esto, ¡allá va el ejercicio resuelto!

Archivo provincias.html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ejemplo de provincias y regiones</title>
        <script type="text/javascript" src="public/js/jquery.js"></script>
        <script type="text/javascript">             
            $(document).ready(function() {               
                $('#comunidades').change(function() {
                    $('#resto-form').show();
                    var idComunidad = $(this).attr('value');
                    $('#provincias').empty();
                    $.getJSON('http://ex-jquery.local/response.php?id=' + idComunidad, function(data) {
                        $.each(data.provinces, function(key, val) {
                            $('#provincias').append('<option>' + val + '</option>');                             
                        });
                    });                     
                });                 
            });             
        </script>   
    </head>
    <body>
        <form>
            <label>Comunidad:</label>               
            <select id="comunidades" name="comunidad">
                <option>Selecciona una comunidad...</option>
                <option value="0">Andalucía</option>
                <option value="1">Aragón</option>
                <option value="2">Catalunya</option>                   
            </select>
            <div id="resto-form" style="display:none">
                <label>Provincia:</label>
                <select id="provincias" name="provincia">
                </select>
                <input type="submit" value="enviar"/>
            </div>
        </form>
    </body>
</html>

Archivo response.php:

$comunidades = array(
    array('Cádiz', 'Málaga', 'Sevilla'),
    array('Huesca', 'Teruel', 'Zaragoza'),
    array('Barcelona', 'Girona', 'Lleida', 'Tarragona')
);

print_r(json_encode(array('provinces' => $comunidades[$_GET['id']])));

Y esto es todo por hoy. See you soon!