How to show pre saved values on dynamic selects with JQuery?

Question

I am using dinamics selects to choose regions and cities from Chile. The code is publised here:

https://codepen.io/amigaviole/pen/NQOpKM

Is working fine and I edited it to use it on a update page to show the saved values but is just working to show the actual region but not the actual city saved. In fact the cities are not been shown on the select.

¿What can I do to show the actual region and city saved and gave the posibility to change the option?

This is the code edited:

https://codepen.io/rodrick26/pen/eYBEXeG

var RegionesYcomunas = {

"regiones": [{
        "NombreRegion": "Arica y Parinacota",
        "comunas": ["Arica", "Camarones", "Putre", "General Lagos"]
},
    {
        "NombreRegion": "Tarapacá",
        "comunas": ["Iquique", "Alto Hospicio", "Pozo Almonte", "Camiña", "Colchane", "Huara", "Pica"]
},
    {
        "NombreRegion": "Antofagasta",
        "comunas": ["Antofagasta", "Mejillones", "Sierra Gorda", "Taltal", "Calama", "Ollagüe", "San Pedro de Atacama", "Tocopilla", "María Elena"]
},
    {
        "NombreRegion": "Atacama",
        "comunas": ["Copiapó", "Caldera", "Tierra Amarilla", "Chañaral", "Diego de Almagro", "Vallenar", "Alto del Carmen", "Freirina", "Huasco"]
},
    {
        "NombreRegion": "Coquimbo",
        "comunas": ["La Serena", "Coquimbo", "Andacollo", "La Higuera", "Paiguano", "Vicuña", "Illapel", "Canela", "Los Vilos", "Salamanca", "Ovalle", "Combarbalá", "Monte Patria", "Punitaqui", "Río Hurtado"]
},
    {
        "NombreRegion": "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",
        "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",
        "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",
        "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", "Chillán", "Bulnes", "Cobquecura", "Coelemu", "Coihueco", "Chillán Viejo", "El Carmen", "Ninhue", "Ñiquén", "Pemuco", "Pinto", "Portezuelo", "Quillón", "Quirihue", "Ránquil", "San Carlos", "San Fabián", "San Ignacio", "San Nicolás", "Treguaco", "Yungay"]
},
    {
        "NombreRegion": "Región de la Araucanía",
        "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 Ríos",
        "comunas": ["Valdivia", "Corral", "Lanco", "Los Lagos", "Máfil", "Mariquina", "Paillaco", "Panguipulli", "La Unión", "Futrono", "Lago Ranco", "Río Bueno"]
},
    {
        "NombreRegion": "Región de Los Lagos",
        "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 Aisén del Gral. Carlos Ibáñez del Campo",
        "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árVca Chilena",
        "comunas": ["Punta Arenas", "Laguna Blanca", "Río Verde", "San Gregorio", "Cabo de Hornos (Ex Navarino)", "AntárVca", "Porvenir", "Primavera", "Timaukel", "Natales", "Torres del Paine"]
},
    {
        "NombreRegion": "Región Metropolitana de Santiago",
        "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"]
}]
}

Script:

jQuery(document).ready(function () {

var iRegion = 0;
var htmlRegion = '<option class="green_bg" value="sin-region">Seleccione región</option><option class="green_bg" value="sin-region">--</option>';
var htmlComunas = '<option class="green_bg" value="sin-comuna">Seleccione comuna</option><option class="green_bg" value="sin-region">--</option>';
var region_seleccionada = "";

jQuery.each(RegionesYcomunas.regiones, function () {
    if(RegionesYcomunas.regiones[iRegion].NombreRegion == document.getElementById("region_seleccionada").value)
    {
        region_seleccionada = "selected";
    }
    else
    {
        region_seleccionada = "";
    }
                
    htmlRegion = htmlRegion + '<option class="green_bg" value="' + RegionesYcomunas.regiones[iRegion].NombreRegion + '" ' + region_seleccionada + '>' + RegionesYcomunas.regiones[iRegion].NombreRegion + '</option>';
    iRegion++;
});

jQuery('#regiones').html(htmlRegion);
jQuery('#comunas').html(htmlComunas);

jQuery('#regiones').change(function () {
    var iRegiones = 0;
    var valorRegion = jQuery(this).val();
    var htmlComuna = '<option class="green_bg" value="sin-comuna">Seleccione comuna</option><option class="green_bg" value="sin-comuna">--</option>';
    var comuna_seleccionada = "";
    
    jQuery.each(RegionesYcomunas.regiones, function () {
        if (RegionesYcomunas.regiones[iRegiones].NombreRegion == valorRegion) {
            var iComunas = 0;
            jQuery.each(RegionesYcomunas.regiones[iRegiones].comunas, function () {             
                if(RegionesYcomunas.regiones[iRegiones].comunas[iComunas] == document.getElementById("comuna_seleccionada").value)
                {
                    comuna_seleccionada = "selected";
                }
                else
                {
                    comuna_seleccionada = "";
                }
                
                htmlComuna = htmlComuna + '<option class="green_bg" value="' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '" ' + comuna_seleccionada + '>' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '</option>';
                iComunas++;
            });
        }
        iRegiones++;
    });
    jQuery('#comunas').html(htmlComuna);
});
jQuery('#comunas').change(function () {
    if (jQuery(this).val() == 'sin-region') {
        alert('selecciones Región');
    } else if (jQuery(this).val() == 'sin-comuna') {
        alert('selecciones Comuna');
    }
});
jQuery('#regiones').change(function () {
    if (jQuery(this).val() == 'sin-region') {
        alert('selecciones Región');
    }
});

});

Answer 1

Solution provided by @Swati in this working fiddle https://jsfiddle.net/ykg8z217/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="region_seleccionada" value="Región del Biobío" readonly />
<input type="hidden" id="comuna_seleccionada" value="Coronel" readonly />

<select id="regiones"></select>
<select id="comunas"></select>


jQuery(document).ready(function() {

  var iRegion = 0;
  var htmlRegion = '<option class="green_bg" value="sin-region">Seleccione región</option><option class="green_bg" value="sin-region">--</option>';
  var htmlComunas = '<option class="green_bg" value="sin-comuna">Seleccione comuna</option><option class="green_bg" value="sin-region">--</option>';
  var region_seleccionada = "";

  jQuery.each(RegionesYcomunas.regiones, function() {
    if (RegionesYcomunas.regiones[iRegion].NombreRegion == document.getElementById("region_seleccionada").value) {
      region_seleccionada = "selected";
    } else {
      region_seleccionada = "";
    }

    htmlRegion = htmlRegion + '<option class="green_bg" value="' + RegionesYcomunas.regiones[iRegion].NombreRegion + '" ' + region_seleccionada + '>' + RegionesYcomunas.regiones[iRegion].NombreRegion + '</option>';
    iRegion++;
  });

  jQuery('#regiones').html(htmlRegion);
  jQuery('#regiones').change(function() {
    var iRegiones = 0;
    var valorRegion = jQuery(this).val();
    var htmlComuna = '<option class="green_bg" value="sin-comuna">Seleccione comuna</option><option class="green_bg" value="sin-comuna">--</option>';
    var comuna_seleccionada = "";

    jQuery.each(RegionesYcomunas.regiones, function() {
      if (RegionesYcomunas.regiones[iRegiones].NombreRegion == valorRegion) {
        var iComunas = 0;
        jQuery.each(RegionesYcomunas.regiones[iRegiones].comunas, function() {
          if (RegionesYcomunas.regiones[iRegiones].comunas[iComunas] == document.getElementById("comuna_seleccionada").value) {
            comuna_seleccionada = "selected";
          } else {
            comuna_seleccionada = "";
          }

          htmlComuna = htmlComuna + '<option class="green_bg" value="' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '" ' + comuna_seleccionada + '>' + RegionesYcomunas.regiones[iRegiones].comunas[iComunas] + '</option>';
          iComunas++;
        });
      }
      iRegiones++;
    });
    jQuery('#comunas').html(htmlComuna);
  });
  jQuery('#regiones').trigger('change') //trigger change event for regions
  jQuery('#comunas').change(function() {
    if (jQuery(this).val() == 'sin-region') {
      alert('selecciones Región');
    } else if (jQuery(this).val() == 'sin-comuna') {
      alert('selecciones Comuna');
    }
  });
  jQuery('#regiones').change(function() {
    if (jQuery(this).val() == 'sin-region') {
      alert('selecciones Región');
    }
  });

});