I have the following code in javascript to fill 3 select depending on the selected region and province.
var RegionesYcomunas = {
"regiones": [{
"NombreRegion": "Region de Tarapacá",
"provincias": ["Iquique", "Tamarugal"],
"comunas": ["Iquique", "Alto Hospicio", "Pozo Almonte", "Camiña", "Colchane", "Huara", "Pica"]
},
{
"NombreRegion": "Region de Antofagasta",
"provincias": ["Antofagasta", "El Loa", "Tocopilla"],
"comunas": ["Antofagasta", "Mejillones", "Sierra Gorda", "Taltal", "Calama", "Ollagüe", "San Pedro de Atacama", "Tocopilla", "María Elena"]
},
{
"NombreRegion": "Region de Atacama",
"provincias": ["Chañaral", "Copiapó", "Huasco"],
"comunas": ["Copiapó", "Caldera", "Tierra Amarilla", "Chañaral", "Diego de Almagro", "Vallenar", "Alto del Carmen", "Freirina", "Huasco"]
},
{
"NombreRegion": "Region de Coquimbo",
"provincias":["Choapa", "Elqui", "Limarí"],
"comunas": ["La Serena", "Coquimbo", "Andacollo", "La Higuera", "Paiguano", "Vicuña", "Illapel", "Canela", "Los Vilos", "Salamanca", "Ovalle", "Combarbalá", "Monte Patria", "Punitaqui", "Río Hurtado"]
},
{
"NombreRegion": "Region de Valparaíso",
"provincias":["Isla de Pascua", "Los Andes", "Marga Marga", "Petorca", "Quillota", "San Antonio", "San Felipe de Aconcagua", "Valparaíso"],
"comunas": ["Valparaíso", "Casablanca", "Concón", "Juan Fernández", "Puchuncaví", "Quintero", "Viña del Mar", "Isla de Pascua", "Los Andes", "Calle Larga", "Rinconada", "San Esteban", "La Ligua", "Cabildo", "Papudo", "Petorca", "Zapallar", "Quillota", "Calera", "Hijuelas", "La Cruz", "Nogales", "San Antonio", "Algarrobo", "Cartagena", "El Quisco", "El Tabo", "Santo Domingo", "San Felipe", "Catemu", "Llaillay", "Panquehue", "Putaendo", "Santa María", "Quilpué", "Limache", "Olmué", "Villa Alemana"]
},
{
"NombreRegion": "Región del Libertador Gral. Bernardo O’Higgins",
"provincias":["Chachapoal", "Cardenal Caro", "Colchagua"],
"comunas": ["Rancagua", "Codegua", "Coinco", "Coltauco", "Doñihue", "Graneros", "Las Cabras", "Machalí", "Malloa", "Mostazal", "Olivar", "Peumo", "Pichidegua", "Quinta de Tilcoco", "Rengo", "Requínoa", "San Vicente", "Pichilemu", "La Estrella", "Litueche", "Marchihue", "Navidad", "Paredones", "San Fernando", "Chépica", "Chimbarongo", "Lolol", "Nancagua", "Palmilla", "Peralillo", "Placilla", "Pumanque", "Santa Cruz"]
},
{
"NombreRegion": "Región del Maule",
"provincias":["Cauquenes", "Curicó", "Linares", "Talca"],
"comunas": ["Talca", "ConsVtución", "Curepto", "Empedrado", "Maule", "Pelarco", "Pencahue", "Río Claro", "San Clemente", "San Rafael", "Cauquenes", "Chanco", "Pelluhue", "Curicó", "Hualañé", "Licantén", "Molina", "Rauco", "Romeral", "Sagrada Familia", "Teno", "Vichuquén", "Linares", "Colbún", "Longaví", "Parral", "ReVro", "San Javier", "Villa Alegre", "Yerbas Buenas"]
},
{
"NombreRegion": "Región del Biobío",
"provincias":["Arauco", "Biobío", "Concepción"],
"comunas": ["Concepción", "Coronel", "Chiguayante", "Florida", "Hualqui", "Lota", "Penco", "San Pedro de la Paz", "Santa Juana", "Talcahuano", "Tomé", "Hualpén", "Lebu", "Arauco", "Cañete", "Contulmo", "Curanilahue", "Los Álamos", "Tirúa", "Los Ángeles", "Antuco", "Cabrero", "Laja", "Mulchén", "Nacimiento", "Negrete", "Quilaco", "Quilleco", "San Rosendo", "Santa Bárbara", "Tucapel", "Yumbel", "Alto Biobío", "Cobquecura", "Coelemu", "Ninhue", "Portezuelo", "Quirihue", "Ránquil", "Treguaco"]
},
{
"NombreRegion": "Región de la Araucanía",
"provincias":["Cautín", "Malleco"],
"comunas": ["Temuco", "Carahue", "Cunco", "Curarrehue", "Freire", "Galvarino", "Gorbea", "Lautaro", "Loncoche", "Melipeuco", "Nueva Imperial", "Padre las Casas", "Perquenco", "Pitrufquén", "Pucón", "Saavedra", "Teodoro Schmidt", "Toltén", "Vilcún", "Villarrica", "Cholchol", "Angol", "Collipulli", "Curacautín", "Ercilla", "Lonquimay", "Los Sauces", "Lumaco", "Purén", "Renaico", "Traiguén", "Victoria", ]
},
{
"NombreRegion": "Región de Los Lagos",
"provincias":["Chiloé", "Llanquihue", "Osorno", "Palena"],
"comunas": ["Puerto Montt", "Calbuco", "Cochamó", "Fresia", "FruVllar", "Los Muermos", "Llanquihue", "Maullín", "Puerto Varas", "Castro", "Ancud", "Chonchi", "Curaco de Vélez", "Dalcahue", "Puqueldón", "Queilén", "Quellón", "Quemchi", "Quinchao", "Osorno", "Puerto Octay", "Purranque", "Puyehue", "Río Negro", "San Juan de la Costa", "San Pablo", "Chaitén", "Futaleufú", "Hualaihué", "Palena"]
},
{
"NombreRegion": "Región Aysén del Gral. Carlos Ibáñez del Campo",
"provincias":["Aysén", "Capitán Prat", "Coyhaique", "General Carrera"],
"comunas": ["Coihaique", "Lago Verde", "Aisén", "Cisnes", "Guaitecas", "Cochrane", "O’Higgins", "Tortel", "Chile Chico", "Río Ibáñez"]
},
{
"NombreRegion": "Región de Magallanes y de la Antártica Chilena",
"provincias":["Antártica Chilena", "Magallanes", "Tierra del Fuego", "Última Esperanza"],
"comunas": ["Punta Arenas", "Laguna Blanca", "Río Verde", "San Gregorio", "Cabo de Hornos (Ex Navarino)", "Antártica", "Porvenir", "Primavera", "Timaukel", "Natales", "Torres del Paine"]
},
{
"NombreRegion": "Región Metropolitana de Santiago",
"provincias":["Chacabuco", "Cordillera", "Maipo", "Melipilla", "Santiago", "Talagante"],
"comunas": ["Cerrillos", "Cerro Navia", "Conchalí", "El Bosque", "Estación Central", "Huechuraba", "Independencia", "La Cisterna", "La Florida", "La Granja", "La Pintana", "La Reina", "Las Condes", "Lo Barnechea", "Lo Espejo", "Lo Prado", "Macul", "Maipú", "Ñuñoa", "Pedro Aguirre Cerda", "Peñalolén", "Providencia", "Pudahuel", "Quilicura", "Quinta Normal", "Recoleta", "Renca", "San Joaquín", "San Miguel", "San Ramón", "Vitacura", "Puente Alto", "Pirque", "San José de Maipo", "Colina", "Lampa", "TilVl", "San Bernardo", "Buin", "Calera de Tango", "Paine", "Melipilla", "Alhué", "Curacaví", "María Pinto", "San Pedro", "Talagante", "El Monte", "Isla de Maipo", "Padre Hurtado", "Peñaflor"]
},
{
"NombreRegion": "Región de Los Ríos",
"provincias":["Ranco", "Valdivia"],
"comunas": ["Valdivia", "Corral", "Lanco", "Los Lagos", "Máfil", "Mariquina", "Paillaco", "Panguipulli", "La Unión", "Futrono", "Lago Ranco", "Río Bueno"]
},
{
"NombreRegion": "Region de Arica y Parinacota",
"provincias": ["Arica", "Parinacota"],
"comunas": ["Arica", "Camarones", "Putre", "Parinacota","General Lagos"]
},
{
"NombreRegion": "Región de Ñuble",
"provincias":["Diguillín", "Itata", "Punilla"],
"comunas": ["Bulnes", "Chillán", "Chillán Viejo", "El Carmen", "Pemuco", "Pinto", "Quillón", "San Ignacio", "Yungay", "San Carlos", "Coihueco", "Ñiquén", "San Fabián", "San Nicolás"]
}]
}
jQuery(document).ready(function () {
var iRegion = 0;
var htmlRegion = '<option value=" ">Seleccione región</option><option value=" " disabled="disabled">--</option>';
var htmlProvincias = '<option value=" ">Seleccione una provincia</option><option value=" " disabled="disabled">--</option>';
var htmlComunas = '<option value=" ">Seleccione una comuna</option><option value=" " disabled="disabled">--</option>';
jQuery.each(RegionesYcomunas.regiones, function () {
htmlRegion = htmlRegion + '<option value="' + RegionesYcomunas.regiones[iRegion].NombreRegion + '">' + RegionesYcomunas.regiones[iRegion].NombreRegion + '</option>';
iRegion++;
});
jQuery('#regiones').html(htmlRegion);
jQuery('#provincias').html(htmlProvincias);
jQuery('#comunas').html(htmlComunas);
jQuery('#regiones').change(function () {
var iRegiones = 0;
var valorRegion = jQuery(this).val();
var htmlProvincia = '<option value=" ">Seleccione provincia</option><option value="sin-provincia" disabled="disabled">--</option>';
jQuery.each(RegionesYcomunas.regiones, function () {
if (RegionesYcomunas.regiones[iRegiones].NombreRegion == valorRegion) {
var iProvincias = 0;
jQuery.each(RegionesYcomunas.regiones[iRegiones].provincias, function () {
htmlProvincia = htmlProvincia + '<option value="' + RegionesYcomunas.regiones[iRegiones].provincias[iProvincias] + '">' + RegionesYcomunas.regiones[iRegiones].provincias[iProvincias] + '</option>';
iProvincias++;
});
}
iRegiones++;
});
jQuery('#provincias').html(htmlProvincia);
});
jQuery('#provincias').change(function(){
valorProvincia = jQuery(this).val();
var htmlComuna = '<option value=" ">Seleccione una comuna</option><option value="sin-comuna" disabled="disabled">--</option>';
var iComunas = 0;
jQuery.each(RegionesYcomunas.provincias, function(){
if (RegionesYcomunas.regiones[iProvincias].provincias == valorProvincia) {
jQuery.each(RegionesYcomunas.regiones[iRegiones].comunas, function(){
htmlComuna = htmlComuna + '<option value="' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '">' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '</option>';
iComunas++;
});
}
iProvincias++;
});
jQuery('#comunas').html(htmlComuna);
});
});
body{
font-family: 'Dekko';
-webkit-user-select: none !important;
-moz-user-select: none !important;
-o-user-select: none !important;
-ms-user-select: none !important;
}
select{
font-family: 'Dekko';
font-size: 12pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dekko" rel="stylesheet">
<body oncontextmenu="return false">
<h3>Seleccione</h3>
<select id="regiones" class="select_region" required="required" name="regiones"></select>
<br><br>
<select id="provincias" class="select_provincia" required="required" name="provincias"></select>
<br><br>
<select id="comunas" class="select_ciudad" required="required" name="comunas"></select>
</body>
It turns out that the <select>
to show the communes does not work, it does not show anything after selecting a province.
My problem is that, what I should do when I select a province, the communes select must show the communes corresponding to the chosen province.
So that you do not have to read the complete code, I leave the part where I try to fill in the select of the communes.
jQuery('#provincias').change(function(){
valorProvincia = jQuery(this).val();
var htmlComuna = '<option value=" ">Seleccione una comuna</option><option value="sin-comuna" disabled="disabled">--</option>';
var iComunas = 0;
jQuery.each(RegionesYcomunas.provincias, function(){
if (RegionesYcomunas.regiones[iProvincias].provincias == valorProvincia) {
jQuery.each(RegionesYcomunas.regiones[iRegiones].comunas, function(){
htmlComuna = htmlComuna + '<option value="' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '">' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '</option>';
iComunas++;
});
}
iProvincias++;
});
jQuery('#comunas').html(htmlComuna);
});
As extra data, this code was obtained from the following source: Regiones and Communes of Chile
The current state of your JSON makes it impossible to know which province each commune belongs to, because they come in an array without any identifier.
One possibility would be to build a JSON where you have a key for each province and within it an array with their respective communes.
It would be a structure like this:
The
select
dependents could then be done without problems as follows:I share if someone can improve it