En este ejemplo usamos programación con JavaScript usando departamentos y municipios de Guatemala, al elegir un departamento la segunda lista desplegable mostrará los municipios de este departamento, el código completo de la pagina se pone a continuación
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script>
function cargardepartamentos() {
var array = ["GUATEMALA","EL PROGRESO","SACATEPEQUEZ","CHIMALTENANGO","ESCUINTLA","SANTA ROSA","SOLOLA","TOTONICAPAN","QUETZALTENANGO","SUCHITEPEQUEZ","RETALHULEU","SAN MARCOS","HUEHUETENANGO","QUICHE","BAJA VERAPAZ","ALTA VERAPAZ","PETEN","IZABAL","ZACAPA","CHIQUIMULA","JALAPA","JUTIAPA"];
array.sort();
addOptions("departamento", array);
}
//Función para agregar opciones a un <select>.
function addOptions(domElement, array) {
var selector = document.getElementsByName(domElement)[0];
for (departamento in array) {
var opcion = document.createElement("option");
opcion.text = array[departamento];
// Añadimos un value a los option para hacer mas facil escoger los municipios
opcion.value = array[departamento].toLowerCase()
selector.add(opcion);
}
}
function cargarmunicipios() {
// Objeto de departamentos con municipios
var listamunicipios = {
guatemala: ["GUATEMALA","SANTA CATARINA PINULA","SAN JOSE PINULA","SAN JOSE DEL GOLFO","PALENCIA","CHINAUTLA","SAN PEDRO AYAMPUC","MIXCO","SAN PEDRO SACATEPEQUEZ","SAN JUAN SACATEPEQUEZ","SAN RAYMUNDO","CHUARRANCHO","FRAIJANES","AMATITLAN","VILLA NUEVA","VILLA CANALES","SAN MIGUEL PETAPA"],
'el progreso': ["GUASTATOYA","MORAZAN","SAN AGUSTIN ACASAGUASTLAN","SAN CRISTOBAL ACASAGUASTLAN","EL JICARO","SANSARE","SANARATE","SAN ANTONIO LA PAZ"],
sacatepequez: ["ANTIGUA","JOCOTENANGO","PASTORES","SUMPANGO","SANTO DOMINGO XENACOJ","SANTIAGO SACATEPEQUEZ","SAN BARTOLOME MILPAS ALTAS","SAN LUCAS SACATEPEQUEZ","SANTA LUCIA MILPAS ALTAS","MAGDALENA MILPAS ALTAS","SANTA MARIA DE JESUS","CIUDAD VIEJA","SAN MIGUEL DUENAS","ALOTENANGO","SAN ANTONIO AGUAS CALIENTES","SANTA CATARINA BARAHONA"],
chimaltenango: ["CHIMALTENANGO","SAN JOSE POAQUIL","SAN MARTIN JILOTEPEQUE","SAN JUAN COMALAPA","SANTA APOLONIA","TECPAN GUATEMALA","PATZUN","SAN MIGUEL POCHUTA","PATZICIA","SANTA CRUZ BALANYA","ACATENANGO","SAN PEDRO YEPOCAPA","SAN ANDRES ITZAPA","PARRAMOS","ZARAGOZA","EL TEJAR"],
escuintla: ["ESCUINTLA","SANTA LUCIA COTZUMALGUAPA","LA DEMOCRACIA","SIQUINALA","MASAGUA","TIQUISATE","LA GOMERA","GUANAGAZAPA","SAN JOSE","IZTAPA","PALIN","SAN VICENTE PACAYA" ],
'santa rosa': ["CUILAPA","BARBERENA","SANTA ROSA DE LIMA","CASILLAS","SAN RAFAEL LAS FLORES","ORATORIO","SAN JUAN TECUACO","CHIQUIMULILLA","TAXISCO","SANTA MARIA IXHUATAN","GUAZACAPAN","SANTA CRUZ NARANJO","municipio NUEVO VIÑAS","NUEVA SANTA ROSA"],
solola: ["SOLOLA","SAN JOSE CHACAYA","SANTA MARIA VISITACION","SANTA LUCIA UTATLAN","NAHUALA","SANTA CATARINA IXTAHUACAN","SANTA CLARA LA LAGUNA","CONCEPCION","SAN ANDRES SEMETABAJ","PANAJACHEL","SANTA CATARINA PALOPO","SAN ANTONIO PALOPO","SAN LUCAS TOLIMAN","SANTA CRUZ LA LAGUNA","SAN PABLO LA LAGUNA","SAN MARCOS LA LAGUNA","SAN JUAN LA LAGUNA","SAN PEDRO LA LAGUNA","SANTIAGO ATITLAN"],
totonicapan: ["TOTONICAPAN","SAN CRISTOBAL TOTONICAPAN","SAN FRANCISCO EL ALTO","SAN ANDRES XECUL","MOMOSTENANGO","SANTA MARIA CHIQUIMULA","SANTA LUCIA LA REFORMA","SAN BARTOLO AGUAS CALIENTES"],
quetzaltenango: ["QUETZALTENANGO","SALCAJA","OLINTEPEQUE","SAN CARLOS SIJA","SIBILIA","CABRICAN","CAJOLA","SAN MIGUEL SIGUILA","SAN JUAN OSTUNCALCO","SAN MATEO","CONCEPCION CHIQUIRICHAPA","SAN MARTIN SACATEPEQUEZ","ALMOLONGA","CANTEL","HUITAN","ZUNIL","COLOMBA COSTA CUCA","SAN FRANCISCO LA UNION","EL PALMAR","COATEPEQUE","GENOVA COSTA CUCA","FLORES COSTA CUCA","LA ESPERANZA","PALESTINA DE LOS ALTOS"],
suchitepequez: ["MAZATENANGO","CUYOTENANGO","SAN FRANCISCO ZAPOTITLAN","SAN BERNARDINO","SAN JOSE EL IDOLO","SANTO DOMINGO SUCHITEPEQUEZ","SAN LORENZO","SAMAYAC","SAN PABLO JOCOPILAS","SAN ANTONIO SUCHITEPEQUEZ","SAN MIGUEL PANAM","SAN GABRIEL","CHICACAO","PATULUL","SANTA BARBARA","SAN JUAN BAUTISTA","SANTO TOMAS LA UNION","ZUNILITO","municipio NUEVO","RIO BRAVO"],
retalhuleu: ["RETALHULEU","SAN SEBASTIAN","SANTA CRUZ MULUA","SAN MARTIN ZAPOTITLAN","SAN FELIPE","SAN ANDRES VILLA SECA","CHAMPERICO","NUEVO SAN CARLOS","EL ASINTAL"],
'san marcos': ["SAN MARCOS","SAN PEDRO SACATEPEQUEZ","SAN ANTONIO SACATEPEQUEZ","COMITANCILLO","SAN MIGUEL IXTAHUACAN","CONCEPCION TUTUAPA","TACANA","SIBINAL","TAJUMULCO","TEJUTLA","SAN RAFAEL PIE DE LA CUESTA","NUEVO PROGRESO","EL TUMBADOR","SAN JOSE EL RODEO","MALACATAN","CATARINA","AYUTLA (TECUN UMAN)","OCOS","SAN PABLO","EL QUETZAL","LA REFORMA","PAJAPITA","IXCHIGUAN","SAN JOSE OJETENAN","SAN CRISTOBAL CUCHO","SIPACAPA","ESQUIPULAS PALO GORDO","RIO BLANCO","SAN LORENZO"],
huehuetenango: ["HUEHUETENANGO","CHIANTLA","MALACATANCITO","CUILCO","NENTON","SAN PEDRO NECTA","JACALTENANGO","SAN PEDRO SOLOMA","SAN ILDEFONSO IXTAHUACAN","SANTA BARBARA","LA LIBERTAD","LA DEMOCRACIA","SAN MIGUEL ACATAN","SAN RAFAEL LA INDEPENDENCIA","TODOS SANTOS CUCHUMATAN","SAN JUAN ATITAN","SANTA EULALIA","SAN MATEO IXTATAN","COLOTENANGO","SAN SEBASTIAN HUEHUETENANGO","TECTITAN","CONCEPCION HUISTA","SAN JUAN IXCOY","SAN ANTONIO HUISTA","SAN SEBASTIAN COATAN","SANTA CRUZ BARILLAS","AGUACATAN","SAN RAFAEL PETZAL","SAN GASPAR IXCHIL","SANTIAGO CHIMALTENANGO","SANTA ANA HUISTA","UNIÓN CANTINIL"],
quiche: ["SANTA CRUZ DEL QUICHE","CHICHE","CHINIQUE","ZACUALPA","CHAJUL","STO TOMAS CHICHICASTENANGO","PATZITE","SAN ANTONIO ILOTENANGO","SAN PEDRO JOCOPILAS","CUNEN","SAN JUAN COTZAL","JOYABAJ","NEBAJ","SAN ANDRES SAJCABAJA","SAN MIGUEL USPANTAN","SACAPULAS","SAN BARTOLOME JOCOTENANGO","CANILLA","CHICAMAN","IXCAN","PACHALUN","PLAYA GRANDE"],
'baja verapaz': ["SALAMA","SAN MIGUEL CHICAJ","RABINAL","CUBULCO","GRANADOS","SANTA CRUZ EL CHOL","SAN JERONIMO","PURULHA"],
'alta verapaz': ["COBAN","SANTA CRUZ VERAPAZ","SAN CRISTOBAL VERAPAZ","TACTIC","TAMAHU","SAN MIGUEL TUCURU","PANZOS","SENAHU","SAN PEDRO CARCHA","SAN JUAN CHAMELCO","LANQUIN","SANTA MARIA CAHABON","CHISEC","CHAHAL","FRAY BARTOLOME DE LAS CASAS","LA TINTA","RAXRUHÁ"],
peten: ["FLORES","SAN JOSE","SAN BENITO","SAN ANDRES","LA LIBERTAD","SAN FRANCISCO","SANTA ANA","DOLORES","SAN LUIS","SAYAXCHE","MELCHOR DE MENCOS","POPTUN"],
izabal: ["PUERTO BARRIOS","LIVINGSTON","EL ESTOR","MORALES","LOS AMATES"],
zacapa: ["ZACAPA","ESTANZUELA","RIO HONDO","GUALAN","TECULUTAN","USUMATLAN","CABANAS","SAN DIEGO","LA UNION","HUITE"],
chiquimula: ["CHIQUIMULA","SAN JOSE LA ARADA","SAN JUAN LA ERMITA","JOCOTAN","CAMOTAN","OLOPA","ESQUIPULAS","CONCEPCION LAS MINAS","QUEZALTEPEQUE","SAN JACINTO","IPALA"],
jalapa: ["JALAPA","SAN PEDRO PINULA","SAN LUIS JILOTEPEQUE","SAN MANUEL CHAPARRON","SAN CARLOS ALZATATE","MONJAS","MATAQUESCUINTLA"],
jutiapa: ["JUTIAPA","EL PROGRESO","SANTA CATARINA MITA","AGUA BLANCA","ASUNCION MITA","YUPILTEPEQUE","ATESCATEMPA","JEREZ","EL ADELANTO","ZAPOTITLAN","COMAPA","JALPATAGUA","CONGUACO","MOYUTA","PASACO","SAN JOSE ACATEMPA","QUESADA"]
}
var departamentos = document.getElementById('departamento')
var municipios = document.getElementById('municipio')
var departamentoSeleccionada = departamentos.value
// Se limpian los municipios
municipios.innerHTML = '<option value="">SELECCIONE UN MUNICIPIO...</option>'
if(departamentoSeleccionada !== ''){
// Se seleccionan los municipios y se ordenan
departamentoSeleccionada = listamunicipios[departamentoSeleccionada]
departamentoSeleccionada.sort()
// Insertamos los municipios
departamentoSeleccionada.forEach(function(municipio){
opcion = document.createElement('option')
opcion.value = municipio
opcion.text = municipio
municipios.add(opcion)
});
}
}
// Iniciar la carga de departamentos solo para comprobar que funciona
</script>
</head>
<body onload="cargardepartamentos();">
<table>
<tr>
<td align=right>departamento:</td>
<td align=left colspan=3>
<!-- Añadido onchange para cargar los municipios -->
<select name="departamento" id="departamento" onchange="cargarmunicipios();" class="form-control">
<option value="">SELECCIONE UN DEPARTAMENTO...</option>
</select>
</td>
</tr>
<tr>
<td align=right>municipio:</td>
<td align=left colspan=3>
<select name="municipio" id="municipio" class="form-control">
<option value="">SELECCIONE UN MUNICIPIO...</option>
</select>
</td>
</tr>
</table>
</body>
</html>
