javascript - 如何使用 JQuery 在动态选择中显示预先保存的值？

Question

我正在使用动态选择来选择智利的地区和城市。代码在这里发布：

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

工作正常，我对其进行了编辑以在更新页面上使用它来显示保存的值，但只是在显示实际区域而不是实际保存的城市。事实上，城市并没有显示在选择上。

¿ 我可以做些什么来显示实际保存的地区和城市并提供更改选项的可能性？

这是编辑的代码：

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');
    }
});

});

标签： javascriptjquery

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');
    }
  });

});