var pais = [
{id:1,name:"peru"},
{id:2,name:"mexico"},
{id:3,name:"españa"}
]
var categorias = [
{id:1,name:"comida peruana",idPais:1},
{id:2,name:"tradiciones peruanas",idPais:1},
{id:3,name:"cultura peruana",idPais:1},
{id:4,name:"comida mexico",idPais:2},
{id:5,name:"tradiciones mexico",idPais:2},
{id:6,name:"cultura mexico",idPais:2},
{id:7,name:"comida españa",idPais:3},
{id:8,name:"tradiciones españa",idPais:3},
{id:9,name:"cultura españa",idPais:3},
]
var subCategorias = [
{id:1,name:"ceviche",idCategoria:1},
{id:2,name:"aji de gallina",idCategoria:1},
{id:3,name:"Inti Raymi",idCategoria:2},
{id:4,name:"Sr de los Milagros",idCategoria:2},
{id:5,name:"chavin",idCategoria:3},
{id:6,name:"caral",idCategoria:3},
{id:7,name:"tacos",idCategoria:4},
{id:8,name:"tacos",idCategoria:4},
{id:9,name:"tacos",idCategoria:5},
{id:10,name:"tacos",idCategoria:5},
{id:11,name:"tacos",idCategoria:6},
{id:12,name:"tacos",idCategoria:6},
{id:13,name:"torbe",idCategoria:7},
{id:14,name:"torbe",idCategoria:7},
{id:15,name:"torbe",idCategoria:8},
{id:16,name:"torbe",idCategoria:8},
{id:17,name:"torbe",idCategoria:9},
{id:18,name:"torbe",idCategoria:9},
]
//creando los options de area
var paisSelect = document.getElementById('pais');
var categoriasSelect = document.getElementById('categorias');
var subCategoriasSelect = document.getElementById('subCategorias');
paisSelect.addEventListener("change", cargarCategorias);
categoriasSelect.addEventListener("change", cargarSubCategorias);
pais.forEach(function(pais){
let opcion = document.createElement('option')
opcion.value = pais.id
opcion.text = pais.name
paisSelect.add(opcion)
})
function cargarCategorias(){
categoriasSelect.options.length = 1;
subCategoriasSelect.options.length = 1;
categorias
.filter(function (categoria){
return categoria.idPais == this;
}, paisSelect.value)
.forEach(function(categoria){
let opcion = document.createElement('option')
opcion.value = categoria.id
opcion.text = categoria.name
categoriasSelect.add(opcion);
});
}
function cargarSubCategorias(){
subCategoriasSelect.options.length = 1;
subCategorias
.filter(function (subCategoria){
return subCategoria.idCategoria == this;
}, categoriasSelect.value)
.forEach(function(subCategoria){
let opcion = document.createElement('option')
opcion.value = subCategoria.id
opcion.text = subCategoria.name
subCategoriasSelect.add(opcion);
});
}
<label for="pais">Areas:</label>
<select id="pais">
<option value="0">seleccione</option>
</select>
<br>
<label for="pais">Categorias:</label>
<select id="categorias">
<option value="0">selecccione</option>
</select>
<br>
<label for="pais">Sub Categorias:</label>
<select id="subCategorias">
<option value="0">selecccione</option>
</select>