Create a select that depends on another

ml = " Mililitros";
mls = " Mililitro";
li = " Litros";
lis = " Litro";
gr = " Gramos";
grs = " Gramo";
mg = " Miligramos";
mgs = " Miligramo";
kl = " Kilogramos";
kls = " Kilogramo";

tca = "<b>Para hacer ";
tcc = " se requieren:</b>";
sup = 'Seleccione un Producto...';

secciones = [
    'seccion1',
    'seccion2'
];
// ARREGLO
producto = [
    /*
    a: Abreviacion Formula
    n: Nombre
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    az: azul
    ro: rojo
    am: amarillo
    bla: blanco
        0 = OXI
        1 = COR
        2 = RADIOACTIVO
        3 = NO AGUA
        4 = RIESGO BIOLOGICO
        5 = NADA

    */
    { n: 'Producto 1 (seccion1)', az: 1, ro: 0, am: 0, bla: 0, c: ' ', v: 0, t: 'sol', grupo: 'seccion1' },
    { n: 'Producto 2 (seccion2)', az: 1, ro: 0, am: 0, bla: 0, c: ' ', v: 0, t: 'sol', grupo: 'seccion2' },
    { n: 'Producto 3 (seccion1)', az: 1, ro: 0, am: 0, bla: 0, c: ' ', v: 0, t: 'sol', grupo: 'seccion1' },
    { n: 'Producto 4 (seccion2)', az: 1, ro: 0, am: 0, bla: 0, c: ' ', v: 0, t: 'sol', grupo: 'seccion2' },
];
producto.sort(function(a, b) {
    if (a.n > b.n) {
        return 1;
    }
    if (a.n < b.n) {
        return -1;
    }
    // a must be equal to b
    return 0;
});

// ARREGLO
componente = new Array();
/*
a: Abreviacion Formula
n: Nombre con espacio igual espacio ( = )
v: valor inicial
t: tipo de componente true para liq y false para sol
*/
componente[00] = {
    n: 'Agua H<sub>2</sub>O = ',
    v: 0,
    t: "liq",
    c: "El agua (H<sub>2</sub>O) es un compuesto químico inorgánico formado por dos átomos de hidrógeno (H) y uno de oxígeno (O).​ Esta molécula es esencial en la vida de los seres vivos, al servir de medio para el metabolismo de las biomoléculas, se encuentra en la naturaleza en sus tres estados y fue clave para su formación. Hay que distinguir entre el agua potable y el agua pura, pues la primera es una mezcla que también contiene sales en solución; es por esto que en laboratorio y en otros ámbitos se usa agua destilada.",
};
componente[01] = {
    n: 'Texapon (Lauril Sulfato Sodico) = ',
    v: 0,
    t: "sol",
    c: "Este palabra presenta una notable insensibilidad frente a los endurecedores del agua e incluso a bajas temperaturas es capaz de desarrollar todo su poder espumante.Su alta compatibilidad con la piel y su capacidad humectante y emulsionante, hacen que sea una de las materias primas más usadas en cosmética. A estas propiedades hay que sumarle su ligero olor que permite que sea perfumado sin ningún problema. En cuanto a su coloración, si se presenta en forma de pasta es levemente turbio, pero una vez diluido toma un aspecto claro más o menos transparente según el grado de impurezas; esto permite que también sea fácilmente coloreado.",
};
componente[02] = {
    n: 'Alcohol Cetilico -  CH<sub>3</sub>(CH<sub>2</sub><sub>15</sub>OH = ',
    v: 0,
    t: "liq",
    c: "El alcohol cetílico, también conocido como 1-hexadecanol o alcohol palmitílico, es un alcohol graso con la fórmula molecular CH<sub>3</sub>(CH<sub>2</sub><sub>15</sub>OH. A temperatura ambiente el alcohol cetílico toma la forma de cera blanca o en copos.",

};


function tratamiento_n() {

    for (ab in componente) {
        //componente[ab].n = "<b>" + componente[ab].n+"</b>";
        componente[ab].n = "<button type='button' class='btn btn-default' data-toggle='popover' data-placement='right' title='popover on right' data-content='Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'>popover on right</button>";

    }
    return componente[ab].n
}
tratamiento_n();

function filtrarseccion() {
    document.getElementById('formula').innerHTML = '';
    document.getElementById('tipo').innerHTML = 'A la Espera de su Selección';
    var seccion = document.getElementById('selectSecciones').value;
    salidaproducto(seccion);
}

function primerselect() {

    var select = document.createElement('select');
    select.id = 'selectSecciones';
    select.classList.add('form-control');
    select.addEventListener('change', filtrarseccion);
    var option = document.createElement('option');
    option.disabled = true;
    option.selected = true;
    option.textContent = 'Filtrar por seccion';
    select.appendChild(option);
    secciones.forEach(function(seccion) {
        option = document.createElement('option');
        option.textContent = seccion;
        select.appendChild(option);

    });

    document.getElementById('primerselect').appendChild(select);

}

function salidaproducto(seccion) {
    document.getElementById('lista').innerHTML = '';
    var select = document.createElement('select');
    select.id = 'mySelect';
    select.classList.add('form-control');
    select.addEventListener('change', selector);
    var option = document.createElement('option');
    option.disabled = true;
    option.selected = true;
    option.textContent = sup;
    select.appendChild(option);
    var productofiltrado = producto;

    if (seccion) {
        productofiltrado = producto.filter(function(item) {
            return item.grupo === seccion;
        });
    }

    productofiltrado.forEach(function(item) {
        option = document.createElement('option');
        option.textContent = item.n;
        select.appendChild(option);
    });

    document.getElementById('lista').appendChild(select);

}

function selector() {

    fo = document.getElementById('mySelect').value;
    document.getElementById('formula').innerHTML = "<b>" + fo + "</b>";
    document.getElementById('entrada').value = "";
    document.getElementById('salida').innerHTML = "";
    document.getElementById('procedimiento').innerHTML = "";
    productoSeleccionado = producto.find(x => x.n === this.value);
    tipoEl = document.getElementById('tipo');
    if (productoSeleccionado) {
        tipoEl.innerText = (productoSeleccionado.t === 'liq' ?
            'Indique la cantidad de LITROS de' + ' ' + fo + ': ' : 'Indique la cantidad de KILOS de' + ' ' + fo + ': ');
    } else {
        tipoEl.innerText = '';
    }

    tipoproducto = "";
    tipoproducto = productoSeleccionado.t;
    if (tipoproducto == "liq") {
        tipoproducto = " Litros de ";
    } else {
        tipoproducto = " Kilos de ";
    }

}

function entrada() {
    if (UI = document.getElementById('entrada')) { eval(document.getElementById('formula').textContent.toLowerCase().replace(/ /gi, '_') + '()'); }
}

//VALIDAR SI VALOR INGRESADO ES VALIDO
function validarSiNumero(UI) {


    if (!/^([0.1-9])*$/.test(UI)) {
        var nada = "<div class='alert alert-info' role='alert'> <span class='glyphicon glyphicon-alert' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> ALGO HA OCURRIDO..! </strong> El Valor: <b>" + UI + "</b> no es un numero valido, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + " </strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI === "") {
        var nada = "<div class='alert alert-warning' role='alert'> <span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span> <span class='sr-only'>Error:</span><strong> LO SENTIMOS..! </strong> Pero usted no ha escrito nada, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI == 0) {
        var nada = "<div class='alert alert-danger' role='alert'> <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> LO SENTIMOS..! </strong> Pero Cero (0) no es un numero valido, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI < 0.1) {
        var nada = "<div class='alert alert-danger' role='alert'> <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'></span> </span> <span class='sr-only'>Error:</span> <strong> LO SENTIMOS..! </strong> El numero que ingreso es muy pequeño, intente nuevamente utilizando numeros desde <strong> 0.1 </strong> hasta la cantidad de " + tipoproducto + " <strong>" + fo.toUpperCase() + "</strong> que usted desee fabricar.</div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else if (UI === "010101100100010101001110010001010101101001010101010001010100110001000001") {
        var nada = "<div class='alert alert-warning' role='alert'></div><div class='alert alert-info text-center' role='alert'><span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span> <span class='glyphicon glyphicon-star' aria-hidden='true'></span></div><div class='alert alert-danger' role='alert'></div>";
        document.getElementById('salida').innerHTML =
            nada;
        document.getElementById("procedimiento").innerHTML = "";
    } else {
        entrada();
    }

}


// CICLO 
function tratamiento(UI) {
    for (xy in componente) {

        tt = "";
        uu = "";


        if (componente[xy].t == "liq") {

            if (componente[xy].v === 1) {
                uu = " Litro ";
                tt = " Mililitro ";
            } else {
                uu = " Litros ";
                tt = " Mililitros ";
            }
        } else {

            if (componente[xy].v === 1) {
                uu = " Kilo ";
                tt = " Gramo ";
            } else {
                uu = " Kilos ";
                tt = " Gramos ";
            }
        }

        if (UI <= 1) { componente[xy].v = (componente[xy].v * 1000).toFixed(2) + tt; } else {
            if (componente[xy].v * 1000 >= 1000) { componente[xy].v = (componente[xy].v).toFixed(2) + uu; } else {
                componente[xy].v = (componente[xy].v * 1000).toFixed(2) + tt;
            }
        }

    }
    return componente[xy].v;
}



function seleccion() {
    var selec = document.getElementById("mySelect").value;
    document.getElementById("formula").innerHTML = selec;
}

//DEFINIENDO FUNCIONES
//PRUEBA
function prueba_entrada() {

    //DEFINIENDO VARIABLES GLOBALES
    var olli = "<ol><li>";
    var liol = "</li></ol>";
    var eli = "<li>";
    var lic = "</li>";
    var lili = lic + eli;


    var UI = document.getElementById('entrada').value;
    if (isNaN(UI)) { return false; }
    componente[00].v = UI * 91.8 / 100;
    componente[01].v = UI * 3 / 100;
    tratamiento(UI);
    resul =
        tca + UI + tipoproducto + fo + tcc + olli +
        componente[00].n + componente[00].v + lili +
        componente[01].n + componente[01].v + liol;

    var procedimiento = "<h3>PROCEDIMIENTO:</h3> PRODUCTO DE PRUEBA";

    document.getElementById('salida').innerHTML = resul,
        document.getElementById('procedimiento').innerHTML = procedimiento;
}



function entrada() {
    if (UI = document.getElementById('entrada')) { eval(document.getElementById('formula').textContent.toLowerCase().replace(/ /gi, '_') + '()'); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body LANG="es-VE" DIR="LTR" onload="primerselect(), salidaproducto();">
    <div class="col-xs-12">
        <div data-toggle="popover" class="clase2" id="contenido">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-5 col-sm-5">
                        secciones:
                        <div id="primerselect">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5">
                        productos:
                        <div id="lista">
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 text-right ">
                    <br>
                        <a href="javascript: window.print(); void 0;">
                            <button type="button" class="btn btn-danger btn-primary btn-md">Imprimir <span class="glyphicon glyphicon-print" aria-hidden="true"></span></button>
                        </a>
                    </div>
                   
                    <div class="clearfix"></div>
                </div>
                 <br>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h1 class="text-uppercase panel-title" id="formula" name="titulo"></h1>
                        <form class="form-inline">
                            <div class="form-group"></div>
                        </form>
                        <form class="form-inline">
                            <div class="form-group">
                                <label id="tipo"  for="exampleInputName2">A la Espera de su Seleccion</label>
                                <input class="form-control" placeholder="Cantidad de Producto" id="entrada" onkeyup="validarSiNumero(this.value);">
                            </div>
                        </form>
                        <div class="panel-body">
                            <div class="clase1" id="nfpa"></div>
                            <div data-toggle="popover" class="clase1" id="salida"></div>
                        </div>
                    </div>
                    <div class="well" id="procedimiento"></div>
                </div>
            </div>
        </div>
    </div>
</body>