robertowest/gist:82742172d7e5551b9c6546fdb90ed11c

## gistfile1.txt
<html>
    <body>
	      <p>Selecciona los productor en función de la categoría seleccionada.</p>
	      <p>Los controles son rellenados desde un archivo JSON.</p>

        <label for="categoria">Catergoria</label><br>
        <select id="categoria" onchange="cargarProductos()"><option>Seleccione una opción</option></select>
        <br>
        <label for="producto">Producto</label><br>
        <select id="producto"><option>Seleccione una opción</option></select>
    </body>
</html>

<script type="text/javascript">
    let array = [{
            categoria: 'Frutas',
            producto: 'Manzana'
        },
        {
            categoria: 'Frutas',
            producto: 'Pera'
        },
        {
            categoria: 'Verdura',
            producto: 'Cilantro'
        },
        {
            categoria: 'Verdura',
            producto: 'Platano'
        },
    ];

    // esta función me ayuda a obtener las diferentes categorías y a retornar una copia del array
    let obtenerDiferentes = function (data, descripcion) {
        var array = [];
        let ds = null;
        for (let obj of data) {
            if (ds != obj[descripcion]) {
                array.push(obj)
                //cuando encuentro un id diferente, seteo a id con ese valor.
                ds = obj[descripcion]
            }
        }
        return JSON.parse(JSON.stringify(array));
    }

    // esta función limpia los options del select que coincida con el id enviado como parámetro.
    let limpiarSelect = function (id) {
        let select = document.getElementById(id);
        select.selectedIndex = null;
        for (let i = 0; i < select.options.length; i++) {
            select.options.remove(i);
            //resto 1 al indice porque al ir eliminando, el .length de los options cambia.
            i--;
        }
    }

    // cargo las categorías cuando la página completa la carga, esto es necesario para garantizar que los elementos html se carguen
    let cargarCategoria = function () {
        //quiero obtener los diferentes valores del array por el criterio de categoria.
        let categorias = obtenerDiferentes(array, 'categoria');
        //accedo al elemento select
        let select = document.getElementById('categoria');
        //recorro las categorías obtenidas anteriormente
        for (let obj of categorias) {
            //creo un nuevo elemento option
            let option = document.createElement("option");
            //seteo value y text. Puede parecer innecesario ya que ambas key tienen el mismo valor pero se deja planteado en caso de que se maneje id y descripción
            option.value = obj.categoria;
            option.text = obj.categoria;
            select.add(option)
        }
    }

    // ejecuto esta función cuando seleccione un valor diferente de categoría. Esta función carga los productos a partir de una categoría seleccioanda
    let cargarProductos = function () {
        //obtengo la posición del valor seleccionado en el select de categoría
        let indexCategoriaSelected = document.getElementById('categoria').selectedIndex;
        //con el indice obtengo el text del options seleccionado
        let valueCategoriaSelected = document.getElementById('categoria').options[indexCategoriaSelected].value;
        //accedo al select de productos
        let select = document.getElementById('producto');
        //es necesario siempre limpiar el select de productos cada vez que selecciono algo nuevo en categoría.
        limpiarSelect('producto');
        //Ahora recorro el array original filtrando los productos por la categoría seleccionada anteriormente.
        for (let obj of array) {
            if (obj.categoria == valueCategoriaSelected) {
                let option = document.createElement("option");
                option.value = obj.producto;
                option.text = obj.producto;
                select.add(option)
            }
        }
    }
    window.onload = function () {
        cargarCategoria();
    }
</script>
	<html>
	<body>
	<p>Selecciona los productor en función de la categoría seleccionada.</p>
	<p>Los controles son rellenados desde un archivo JSON.</p>

	<label for="categoria">Catergoria</label><br>
	<select id="categoria" onchange="cargarProductos()"><option>Seleccione una opción</option></select>
	<br>
	<label for="producto">Producto</label><br>
	<select id="producto"><option>Seleccione una opción</option></select>
	</body>
	</html>

	<script type="text/javascript">
	let array = [{
	categoria: 'Frutas',
	producto: 'Manzana'
	},
	{
	categoria: 'Frutas',
	producto: 'Pera'
	},
	{
	categoria: 'Verdura',
	producto: 'Cilantro'
	},
	{
	categoria: 'Verdura',
	producto: 'Platano'
	},
	];

	// esta función me ayuda a obtener las diferentes categorías y a retornar una copia del array
	let obtenerDiferentes = function (data, descripcion) {
	var array = [];
	let ds = null;
	for (let obj of data) {
	if (ds != obj[descripcion]) {
	array.push(obj)
	//cuando encuentro un id diferente, seteo a id con ese valor.
	ds = obj[descripcion]
	}
	}
	return JSON.parse(JSON.stringify(array));
	}

	// esta función limpia los options del select que coincida con el id enviado como parámetro.
	let limpiarSelect = function (id) {
	let select = document.getElementById(id);
	select.selectedIndex = null;
	for (let i = 0; i < select.options.length; i++) {
	select.options.remove(i);
	//resto 1 al indice porque al ir eliminando, el .length de los options cambia.
	i--;
	}
	}

	// cargo las categorías cuando la página completa la carga, esto es necesario para garantizar que los elementos html se carguen
	let cargarCategoria = function () {
	//quiero obtener los diferentes valores del array por el criterio de categoria.
	let categorias = obtenerDiferentes(array, 'categoria');
	//accedo al elemento select
	let select = document.getElementById('categoria');
	//recorro las categorías obtenidas anteriormente
	for (let obj of categorias) {
	//creo un nuevo elemento option
	let option = document.createElement("option");
	//seteo value y text. Puede parecer innecesario ya que ambas key tienen el mismo valor pero se deja planteado en caso de que se maneje id y descripción
	option.value = obj.categoria;
	option.text = obj.categoria;
	select.add(option)
	}
	}

	// ejecuto esta función cuando seleccione un valor diferente de categoría. Esta función carga los productos a partir de una categoría seleccioanda
	let cargarProductos = function () {
	//obtengo la posición del valor seleccionado en el select de categoría
	let indexCategoriaSelected = document.getElementById('categoria').selectedIndex;
	//con el indice obtengo el text del options seleccionado
	let valueCategoriaSelected = document.getElementById('categoria').options[indexCategoriaSelected].value;
	//accedo al select de productos
	let select = document.getElementById('producto');
	//es necesario siempre limpiar el select de productos cada vez que selecciono algo nuevo en categoría.
	limpiarSelect('producto');
	//Ahora recorro el array original filtrando los productos por la categoría seleccionada anteriormente.
	for (let obj of array) {
	if (obj.categoria == valueCategoriaSelected) {
	let option = document.createElement("option");
	option.value = obj.producto;
	option.text = obj.producto;
	select.add(option)
	}
	}
	}
	window.onload = function () {
	cargarCategoria();
	}
	</script>