Tengo el siguiente código en javascript para llenar 3 select dependiendo de la región y provincia seleccionadas.
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>
Resulta que el <select>
para mostrar las comunas no funciona, no muestra nada luego de seleccionar una provincia.
Mi problema es que, lo que debería hacer cuando seleccione una provincia, el select de las comunas debe mostrar las comunas correspondientes a la provincia escogida.
Para que no tengan que leer el código completo dejo la parte donde intento llenar el select de las comunas.
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);
});
Como dato extra este código lo obtuve de la siguiente fuente: Regiones y Comunas de Chile