jQuery - Adding Multiple Select Dropdown Option Attributes Together

Question

I have the following html for 2 select dropdowns:

I am trying to add together the values in the attribute 'money' for each selected option and then output this is another div.

I am using the below as a guide:

$(function () {
        var fields = $('.product-custom-option.admin__control-select').change(calculate);
        function calculate() {
            var pricesum = 0;
            fields.each(function () {
                pricesum += +$(this).val();
            })
            $('.outputdiv').html(pricesum.toFixed(2));
        }
    })

Which adds the option values together, but when changing .val to .attr('money') it returns NaN (not a number).

Any guidance on what is going wrong would be most appreciated.

Thank you.

Mrudhula Katta · Answer

Change your calculate function as below (commented for better understanding):

$(function() {
  var fields = $('.product-custom-option.admin__control-select').change(calculate);

  function calculate() {
    var pricesum = 0;
    fields.each(function() {
    
      //this refers to select elements not options in this context
      //get selected option
      let money = +$(this.selectedOptions[0]).attr("money");
      
      //skip not selected values
      if (Number(money)===money) pricesum += money;
    })
    //console.log(pricesum)
    $('.outputdiv').html(pricesum.toFixed(2));
  }
})

jQuery - Adding Multiple Select Dropdown Option Attributes Together

1 Answers