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>