Hide/show dynamic generated div based on select option

Question

I have some divs which are generated by jquery. Inside there is showing up the price, the title and the selected option value.

I've tried a lot of things to hide each div class "result" if no option is select, but with no luck.

Is there a way to hide each div without rewriting the whole code?

JS:

function pcc_calc_forms() {
  jQuery(".calcolare").each(function (e) {
    var t = jQuery(this).attr("id");

    var n = pcc_form_data(t);
   jQuery("#" + t + "-mostra").html('<h3 class="pcc-total">Totale : ' + n[0] + "" + "€" + '</h3><div class="content">' + n[1] + '<br /><br /></div>')
  })
}

function pcc_form_data(e) {
  var t = new Array(0, "");
  var n = new Array;
  var r = new Array;

  $("#" + e + " select").each(function (e) {
    var title = $(this).attr("data-title");
    var inside = $(this).find("option:selected").attr("data-title");
    var i = $(this).find("option:selected").html();

    if (inside === undefined) {
      inside = " ( " + i + " ) "
    } else {
      inside = " ( " + inside + " ) "
    }

    var i = $(this).find("option:selected").attr("data-price");
    var s = parseFloat($(this).attr("data-mult"));

    if (isNaN(s)) {
      s = 1
    }
    var o = parseFloat($(this).find("option:selected").text());
    if (isNaN(o)) {
      o = 0
    }

    if (i !== undefined) {
      if (i == "this") {
        i = o
      } else {
        i = parseFloat(i)
      }

      t[0] = t[0] + parseFloat(i) * s;

      if (s == 1) {
        t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + "" + " € " + "</div>"
      } else {
        t[1] = t[1] + "<div class=\"result\"><b>" + title + "" + inside + "</b> : " + parseFloat(i) + " X " + s + " = " + parseFloat(i) * s + "" + " € " + "</div>"
      }
    }
  });

  n = [];
  r = [];

  return t
}

$(document).ready(function () {
  pcc_calc_forms();

  $(document).on("change", ".calcolare select", function () {
    pcc_calc_forms()

  });
});

THIS is the link to the fiddle

Thanks in advance for any hint.

Answer 1

$(document).on("change", ".calcolare select", function () {
  var i = $(this).find('option:selected').index();  
  alert(i);
  //if(i>0) ppc_calc_forms();
  //else $('.results').hide();
})

This will find the index of the selected option... as you can see , it works, just not with your function...

I would simplify that script as much as possible..

Answer 2

I understand not wanting to rewrite the code substantially at this point. However, for comparison, here is the way I would do it while still holding to your general pattern:

function pcc_calc_forms() {
    jQuery(".calcolare").each(function (e) {
        var t = jQuery(this).attr("id");

        var items = pcc_item_data(t);

        var totalPrice = $.makeArray(items).reduce(function(total,item,i,a) {
            return total+item.price;
        },0);

        text = '<h3 class="pcc-total">Totale : ' + totalPrice + "" + "€" + '</h3>';
        text += '</h3><div class="content">';

        items.each(function(i,item) {
            if (item.mult > 1)
                text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + " X " + item.mult + " = " + item.price * item.mult + "" + " € " + "</div>";
            else
                text += "<div class=\"result\"><b>" + item.title + " ( " + item.name + " )</b> : " + item.price + "" + " € " + "</div>";
        });

        text += '<br /><br /></div>';

        jQuery("#" + t + "-mostra").html(text);
    });
}

function pcc_item_data(e) {
    return $("#" + e + " select").map(function (e) {
        if (this.selectedIndex > 0) {
            var item = {};
            item.title = $(this).attr("data-title");
            var inside = $(this).find("option:selected").attr("data-title");
            var i = $(this).find("option:selected").html();
            item.name = inside ? inside : i;
            item.price = parseFloat($(this).find("option:selected").attr("data-price"));
            var mult = parseFloat($(this).attr("data-mult"));
            item.mult = isNaN(mult) ? 1 : mult;
            return item;
        }
    });
}

$(document).ready(function () {
    pcc_calc_forms();

    $(document).on("change", ".calcolare select", function () {
            pcc_calc_forms();
    });
});

What I've done:

• Separate data collection ( pcc_item_data ) from data presentation; this makes the code more readable and easier to maintain later.
• Used map ( http://api.jquery.com/jQuery.map/ ) and reduce ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce ) to transform / aggregate arrays; they're concise and expressive once you're familiar with them.