0

Tengo el siguiente código js que hace lo siguiente:

Muestra de manera ordenada lo que recupera de un arreglo en un select pero no se como hacer que imprima en el si el producto seleccionado es solido o liquido.. me he bloqueado, y por ello recurro a su colaboración. Dejo sólo el codigo JS.

Vale acotar que ya intente colocando document.getElementById("tipo").innerHTML = tipo; despues de document.getElementById("lista").innerHTML = document.write(text); pero no funciona.

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];
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;
});
function selector() {
    // document.getElementsByTagName("option").addEventListener("click", location.reload());
    var selec = document.getElementById("mySelect").value;
    document.getElementById("formula").innerHTML = selec;
    document.getElementById("mySelect").value = "";
    document.getElementById("entrada").value = "";
    document.getElementById("salida").innerHTML = "";
    document.getElementById("procedimiento").innerHTML = "";
}

function salidaproducto() {
    text = "<select class='form-control' id='mySelect' onchange='selector();'>";
    for (li in producto) {
        var tipo = "";
        if (producto[li].t == "liq") { tipo = "Liquido"; } else { tipo = "Solido"; };
        text += "<option>" + producto[li].n + "</option>";
    }
    text += "<option value='' disabled selected hidden>Seleccione un Producto...</option>";
    text += "</select>";
    document.getElementById("lista").innerHTML = document.write(text);
}
3
  • 1
    No entiendo muy bien lo que quieres conseguir pero para asignar el código HTML al elemento lista te basta con hacer: document.getElementById('lista').innerHTML = text; Commented el 3 feb. 2018 a las 20:54
  • ¿A qué te refieres con generar un resultado?
    – Rubén
    Commented el 3 feb. 2018 a las 21:06
  • Tal cual como lo tengo el codigo funciona, porque desde el html tengo insertado las funciones salidaproducto(); y selector(); ya que este html muestra una serie de salidas segun la seleccion..!! pero lo que quiero hacer es que dentro de la funcion salidaproducto se genere document.getElementById('tipo').innerHTML = tipo; es decir se genere en el id tipo la palabra solido o liquido. Creo que debe hacerse desde la function salidaproducto() porque es alli donde se selecciona el producto con el cual se va a trabajar. Commented el 4 feb. 2018 a las 1:24

1 respuesta 1

0

Si lo único que quieres es mostrar en la opción si es "Sólido" o "líquido" no tienes más que añadir el literal al texto de la opción:

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
    text = "<select class='form-control' id='mySelect' onchange='selector();'>";
    for (li in producto) {
        var tipo = "";
        if (producto[li].t == "liq") { tipo = "Liquido"; } else { tipo = "Solido"; };
        text += "<option>" + producto[li].n + " (" + tipo + ")</option>";
    }
    text += "<option value='' disabled selected hidden>Seleccione un Producto...</option>";
    text += "</select>";
    document.getElementById("lista").innerHTML = text;
}

salidaproducto();
<div id="lista"></div>

Como puedes ver también he cambiado la forma de asignar el código HTML al elemento lista, estableciendo directamente el valor de text a la propiedad innerHTML.

En cualquier caso yo te recomendaría crear los elementos HTML con createElement y utilizar los métodos del DOM para añadir los elementos a éste:

producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
  var select = document.createElement('select');
  select.id = 'mySelect';
  select.classList.add('form-control');
  var option = document.createElement('option');
  option.disabled = true;
  option.selected = true;
  option.textContent = 'Seleccione un Producto...';
  select.appendChild(option);
  for (li in producto){
    option = document.createElement('option');
    option.textContent = producto[li].n +
      ' (' + (producto[li].t === 'liq' ? 'Líquido' : 'Sólido') + ')';
      select.appendChild(option);
  }
  document.getElementById('lista').appendChild(select);
}

salidaproducto();
<div id="lista"></div>

Si únicamente quieres mostrar en el select el nombre y mostrar el tipo del elemento seleccionado en otro sitio deberías utilizar el value del option para identificar el elemento seleccionado. El tipo puedes obtenerlo del elemento correspondiente del array producto:

var producto = [
    /*
    a: Abreviacion Formula
    n: Nombre con espacio igual espacio ( = )
    v: valor inicial
    t: tipo de producto true para liq y false para sol
    */
    { c: " ", n: 'Jabon en Pasta', v: 0, t: "sol" },
    { c: " ", n: 'Ambientador', v: 0, t: "liq" },
    { c: " ", n: 'Cloro', v: 0, t: "liq" }
];

function salidaproducto() {
  var select = document.createElement('select');
  select.id = 'mySelect';
  select.classList.add('form-control');
  var option = document.createElement('option');
  option.disabled = true;
  option.selected = true;
  option.textContent = 'Seleccione un Producto...';
  select.appendChild(option);
  for (li in producto){
    option = document.createElement('option');
    option.textContent = producto[li].n;
    option.value = producto[li].n;
    select.appendChild(option);
  }
  select.addEventListener('change', selector);
  document.getElementById('lista').appendChild(select);
}

function selector(){
  var productoSeleccionado = 
    producto.find(x => x.n === this.value);
  var tipoEl = document.getElementById('tipo');
  if (productoSeleccionado){
    tipoEl.innerText = (productoSeleccionado.t === 'liq'
      ? 'Líquido' : 'Sólido');
  }
  else{
    tipoEl.innerText = '';
  }
}

salidaproducto();
div{
  padding: 10px;
}
<div id="lista"></div>
<div id="tipo"></div>

7
  • Muchas Gracias por tomar parte de su tiempo en contestar mi requerimiento, muy amable de su parte.. Ese codigo me parece mucho mas estructurado, me encanta y lo voy a tratar de implementar..! pero me nace una nueva duda y es de como puedo agregar el onchange='selector();' intente con select.setAttribute("onchange" = selector()); pero no funciona, creo que esta malo mi interpretacion..! y lo otro es el lograr que escriba en el <div id="tipo"></div> es decir que solo escriba si es liquido o solido..! Commented el 4 feb. 2018 a las 2:31
  • Para asociar controladores a los eventos lo mejor es utilizar el método addEventListener: select.addEventListener('change', selector); Commented el 4 feb. 2018 a las 2:55
  • Listo Implementado.. aun me falta extraer Solido y Liquido al <div id="tipo"></div> segun corresponda la seleccion..!! Commented el 4 feb. 2018 a las 3:10
  • ¿Dónde ? ¿En el método selector al seleccionar un valor? Commented el 4 feb. 2018 a las 9:40
  • He implementado el codigo sugerido para function salidaproducto() que manda al <div id="lista"></div> lo generado en la funcion salidaproducto(); si utilizara la linea sugerida option.textContent = producto[li].n + ' (' + (producto[li].t === 'liq' ? 'Líquido' : 'Sólido') + ')'; la salida en el div lista fuera algo como Cloro (LIQUIDO) y lo requerido es que sea como en efecto lo limpie que en el div lista solo muestre Cloro y que en el div tipo muestre LIQUIDO. Sigo leyendo sobre DOM pero nada que logro comprender como debe ser la instruccion que debo indicarle a la function. Commented el 4 feb. 2018 a las 14:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.