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: á … ú ñ
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í:
En wikipedia podemos ver la lista de distritos y barrios de Madrid.
1301 visitas.
