Skip to main content
Commonmark migration
Origen Enlace

###PD

PD

Si te observas en los bucles verás que dentro de ellos se crean los option en una variable y luego se agregan una sola vez todos juntos.

Considera implementar esa práctica cuando tengas que actualizar el DOM con elementos que van a obtenerse dentro de un bucle. Es mucho mejor concatenar y actualizar el DOM una sola vez que actualizarlo n veces en cada iteración.

###PD

Si te observas en los bucles verás que dentro de ellos se crean los option en una variable y luego se agregan una sola vez todos juntos.

Considera implementar esa práctica cuando tengas que actualizar el DOM con elementos que van a obtenerse dentro de un bucle. Es mucho mejor concatenar y actualizar el DOM una sola vez que actualizarlo n veces en cada iteración.

PD

Si te observas en los bucles verás que dentro de ellos se crean los option en una variable y luego se agregan una sola vez todos juntos.

Considera implementar esa práctica cuando tengas que actualizar el DOM con elementos que van a obtenerse dentro de un bucle. Es mucho mejor concatenar y actualizar el DOM una sola vez que actualizarlo n veces en cada iteración.

se añadieron 385 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

###PD

Si te observas en los bucles verás que dentro de ellos se crean los option en una variable y luego se agregan una sola vez todos juntos.

Considera implementar esa práctica cuando tengas que actualizar el DOM con elementos que van a obtenerse dentro de un bucle. Es mucho mejor concatenar y actualizar el DOM una sola vez que actualizarlo n veces en cada iteración.

###PD

Si te observas en los bucles verás que dentro de ellos se crean los option en una variable y luego se agregan una sola vez todos juntos.

Considera implementar esa práctica cuando tengas que actualizar el DOM con elementos que van a obtenerse dentro de un bucle. Es mucho mejor concatenar y actualizar el DOM una sola vez que actualizarlo n veces en cada iteración.

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

El estado actual de tu JSON imposibilita conocer a qué provincia pertenece cada comuna, porque las mismas vienen en un array sin ningún identificador.

Una posibilidad sería construir un JSON donde tengas una clave por cada provincia y dentro de ella un array con sus respectivas comunas.

Sería una estructura como esta:

{
  "regiones":[
    {
      "NombreRegion":"Region de Tarapacá",
      "provincias":[
        {
          "Iquique":[
            "Iquique",
            "Alto Hospicio",
            "Pozo Almonte"
          ]
        },
        {
          "Tamarugal":[
            "Camiña",
            "Colchane",
            "Huara",
            "Pica"
          ]
        }
      ]
    },
    {
      "NombreRegion":"Region de Antofagasta",
      "provincias":[
        {
          "Antofagasta":[
            "Antofagasta",
            "Mejillones",
            "Sierra Gorda"
          ]
        },
        {
          "El Loa":[
            "Taltal",
            "Calama",
            "Ollagüe"
          ]
        },
        {
          "Tocopilla":[
            "San Pedro de Atacama",
            "Tocopilla",
            "María Elena"
          ]
        }
      ]
    }
  ]
}

Los select dependientes podrían entonces realizarse sin problemas del modo siguiente:

var str =
  `
{
  "regiones":[
    {
      "NombreRegion":"Region de Tarapacá",
      "provincias":[
        {
          "Iquique":[
            "Iquique",
            "Alto Hospicio",
            "Pozo Almonte"
          ]
        },
        {
          "Tamarugal":[
            "Camiña",
            "Colchane",
            "Huara",
            "Pica"
          ]
        }
      ]
    },
    {
      "NombreRegion":"Region de Antofagasta",
      "provincias":[
        {
          "Antofagasta":[
            "Antofagasta",
            "Mejillones",
            "Sierra Gorda"
          ]
        },
        {
          "El Loa":[
            "Taltal",
            "Calama",
            "Ollagüe"
          ]
        },
        {
          "Tocopilla":[
            "San Pedro de Atacama",
            "Tocopilla",
            "María Elena"
          ]
        }
      ]
    }
  ]
}
`;
var json = JSON.parse(str);
var selRegiones = $('#regiones');
var selProvincias = $('#provincias');
var selComunas = $('#comunas');
var jsonRegiones = json.regiones;
var regionesOptions = "";

$.each(jsonRegiones, function(k, v) {
  regionesOptions += `<option value="${k}">${v.NombreRegion}</option>`;
});
  selRegiones.append(regionesOptions);

$(selRegiones).on('change', function() {

  selProvincias.find("option:not(:first)").remove();
  selComunas.find("option:not(:first)").remove();
  var provinciasOptions = "";
  var jsonProvincias = jsonRegiones[this.value].provincias;
  
  $.each(jsonProvincias, function(k, v) {
    $.each(v, function(provincia, comuna) {
      provinciasOptions += `<option value="${k}">${provincia}</option>`;
    });
  });

  selProvincias.append(provinciasOptions);
  
});

$(selProvincias).on('change', function() {

  selComunas.find("option:not(:first)").remove();
  var indexRegion = selRegiones.find(":selected").val();
  var keyProvincia = selProvincias.find(":selected").text();
  var arrComunas = jsonRegiones[indexRegion].provincias[this.value][keyProvincia];
  var comunasOptions = "";
  $.each(arrComunas, function(k, v) {
    comunasOptions += `<option value="${k}">${v}</option>`;
  });
  
  selComunas.append(comunasOptions);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="regiones">
  <option value="-1">--Seleccione Región--</option>
</select>
<br />
<select id="provincias">
  <option value="-1">--Seleccione Provincia--</option>
</select>
<br />
<select id="comunas">
  <option value="-1">--Seleccione Comunas--</option>
</select>