如何使用 JQuery 在動態選擇中顯示預先保存的值？

Question

我正在使用動態選擇來選擇智利的地區和城市。 代碼在這里發布：

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

工作正常，我對其進行了編輯以在更新頁面上使用它來顯示保存的值，但只是在顯示實際區域而不是實際保存的城市。 事實上，select 上並沒有顯示這些城市。

¿ 我可以做些什么來顯示實際保存的地區和城市並提供更改選項的可能性？

這是編輯的代碼：

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"]
}]
}

腳本：

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

@Swati 在這個工作小提琴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');
    }
  });

});