tengo el siguiente codigo funcional:
//DEFINIENDO VARIABLES GLOBALES
br = "<br>";
olli = "<ol><li>";
liol = "</li></ol>";
olc = "</li></ol>";
ulli = "<ul><li>";
liul = "</li></ul>";
ulc = "</li></ul>";
eli = "<li>";
lic = "</li>";
lili = lic + eli;
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...';
// 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 formulas() {
var resultado = "";
resultado += "<div class=\"container-fluid\">";
resultado += "<div class=\"row\">";
resultado += "<div class=\"col-xs-12 col-sm-6\">";
resultado += "<div id=\"lista\"><\/div>";
resultado += "<\/div>";
resultado += "<div class=\"col-xs-12 col-sm-6 text-right \"><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\"><\/button><\/a><\/div>";
resultado += "<div class=\"clearfix\"><\/div>";
resultado += " <\/div>";
resultado += "<div class=\"panel panel-info\">";
resultado += "<div class=\"panel-heading\">";
resultado += "<h1 class=\"text-uppercase panel-title\" id='formula' name=\"titulo\"><\/h1>";
resultado += "<form class=\"form-inline\">";
resultado += "<div class=\"form-group\">";
resultado += "<\/div>";
resultado += "<\/form>";
resultado += "<form class=\"form-inline\">";
resultado += "<div class=\"form-group\">";
resultado += "<label id=\"tipo\" for=\"exampleInputName2\"><\/label>";
resultado += "<input class=\"form-control\" placeholder=\"Cantidad de Producto\" id=\"entrada\" onkeyup=\"validarSiNumero(this.value);\" \/>";
resultado += "<\/div>";
resultado += "<\/form>";
resultado += "<div class=\"panel-body\">";
resultado += "<div class=\"clase1\" id='nfpa'><\/div>";
resultado += "<div data-toggle='popover' class=\"clase1\" id='salida'><\/div>";
resultado += "<\/div>";
resultado += "<\/div>";
resultado += "<div class=\"well\" id='procedimiento'><\/div>";
resultado += "<\/div>";
document.getElementById('contenido').innerHTML = resultado;
document.getElementById('tipo').innerHTML = "A la Espera de su Seleccion";
}
function salidaproducto() {
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);
for (li in producto) {
option = document.createElement('option');
option.textContent = producto[li].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() {
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, '_') + '()'); }
}
<html>
<head>
<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"/>
</head>
<body LANG="es-VE" DIR="LTR" onload="formulas(), salidaproducto();">
<div class="col-xs-12">
<div data-toggle='popover' class="clase2" id="contenido"></div>
</div>
</div>
</body>
</html>
Me gustaria saber cual seria la mejor forma de colocar otro elemento select que me permita hacer lo siguiente:
Mostrar solo producto.grupo=seccion1 o producto.grupo=seccion2 y que solo muestre los productos correspondientes a dicha seccion. Por defecto se puede dejar seccion1 pero si se cambia la seleccion de seccion1 a seccion2 en la lista desplegable entonces se muestre:
Producto 2 (seccion2) Producto 4 (seccion2)
Quisiera saber si alguna persona aca me puede permitir un metodo de hacerlo sin hacer uso de if else ya que en el aplicativo a implementar poseo como 14 secciones.