Combo de distritos y barrios de Madrid.

Vamos a crear un combo HTML mediante PHP con los distritos y barrios de Madrid.

En ciertas ocasiones necesitamos que los y las usuarias introduzcan el barrio al que pertenecen, pero nos encontramos con la dificultad de entrontrar una base de datos con los distritos y barrios de Madrid o un ejemplo que los incluya todos, por eso vamos a desarrollar como generar un combo (select en html) mediante arrays y PHP para obtener tal funcionalidad.

Se podrían crear tablas en Mysql para contener los distritos y barrios, pero en este ejemplo usaremos un array bidimensional, el cual recorreremos con un bucle para ir formando las diferentes opciones del combo.

        <select class="combo">
            <option></option>
            <?php
                $distritos = array(
                    "Centro" => array("Palacio", "Embajadores", "Cortes", "Justicia", "Universidad", "Sol"),
                    "Arganzuela" => array("Imperial", "Las Acacias", "La Chopera", "Legazpi", "Las Delicias", "Palos de Moguer", "Atocha"),
                    "Retiro" => array("Pacífico", "Adelfas", "Estrella", "Ibiza", "Jerónimos", "Niño Jesús"),
                    "Salamanca" => array("Recoletos", "Goya", "Fuente del Berro", "La Guindalera", "Lista", "Castellana"),
                    "Chamartin" => array("El Viso", "Prosperidad", "Ciudad Jardín", "Hispanoamérica", "Nueva España", "Castilla"),
                    "Tetuán" => array("Bellas Vistas", "Cuatro Caminos", "Castillejos", "Almenara", "Valdeacederas", "Berruguete"),
                    "Chamberí" => array("Gaztambide", "Arapiles", "Trafalgar", "Almagro", "Vallehermoso", "Ríos Rosas"),
                    "Fuencarral-El Pardo" => array("El Pardo", "Fuentelarreina", "Peñagrande", "Barrio del Pilar", "La Paz", "Valverde", "Mirasierra", "El Goloso", "Las Tablas", "Montecarmelo"),
                    "Moncloa-Aravaca" => array("Casa de Campo", "Arguelles", "Ciudad Universitaria", "Valdezarza", "Valdemarín", "El Plantío", "Aravaca"),
                    "Latina" => array("Los Cármenes", "Puerta del Ángel", "Lucero", "Aluche", "Batán", "Las Águilas", "Campamento", "Cuatro Vientos"),
                    "Carabanchel" => array("Comillas", "Opañel", "San Isidro", "Vista Alegre", "Puerta Bonita", "Buenavista", "Abrantes"),
                    "Usera" => array("Orcasitas", "Orcasur", "San Fermín", "Almendrales", "Moscardó", "Zofío", "Pradolongo"),
                    "Puente de Vallecas" => array("Entrevías", "San Diego", "Palomeras Bajas", "Palomeras Sureste", "Portazgo", "Numancia"),
                    "Moratalaz" => array("Pavones", "Horcajo", "Marroquina", "Media Legua", "Fontarrón", "Vinateros"),
                    "Ciudad Lineal" => array("Ventas", "Pueblo Nuevo", "Quintana", "Concepción", "San Pascual", "San Juan Bautista", "Colina", "Atalaya", "Costillares"),
                    "Hortaleza" => array("Palomas", "Valdefuentes", "Canillas", "Pinar del Rey", "Apóstol Santiago", "Piovera", "Sanchinarro"),
                    "Villaverde" => array("San Andrés", "San Cristóbal", "Butarque", "Los Rosales", "Los Ángeles"),
                    "Villa de Vallecas" => array("Casco Histórico de Vallecas", "Santa Eugenia"),
                    "Vicálvaro" => array("Casco Histórico de Vicálvaro", "Ambroz"),
                    "San Blas" => array("Simancas", "Hellín", "Amposta", "Arcos", "Rosas", "Rejas", "Canillejas", "Salvador"),
                    "Barajas" => array("Alameda de Osuna", "Aeropuerto", "Casco Histórico de Barajas", "Timón", "Corralejos")
                );

                while ($distrito = current($distritos)) {

                    echo "<optgroup label='".key($distritos)."'>";

                    foreach (current($distritos) as $barrio) 
                    {
                        echo "<option value='".$barrio."'>".$barrio."</option>";
                    }

                    echo "</optgroup>";

                    next($distritos);
                }
            ?>
        </select>

 

Al ser un array de arrays o array multidimensional, para obtener el distrito, usaremos la función key, que nos devuelve la clave de un elemento del array.

Si se quiere evitar problemas con tildes y la letra “ñ”, se podría sustituir estas por sus carácteres homólogos de HTML: &aacute; … &uacute; &ntilde;

Además podemos darle un poco de estilo al combo, para que quede mas resultón mediante este CSS:

.combo
{
    border: 1px solid #BFBFBF;
    margin-bottom: 10px;
    text-align: left;
    background-color: #36383A;
    color: white;
    font-size: 14px;
    padding: 1px;
    width: 250px;
}

 

El resultado final quedará así:

Combo de distritos y barrios de Madrid

En wikipedia podemos ver la lista de distritos y barrios de Madrid.

1102 visitas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *