需要 Javascript 从下拉表单字段中计算总数答案

【问题标题】：Need Javascript to calculate total from dropdown form fields需要 Javascript 从下拉表单字段中计算总数
【发布时间】：2016-11-01 21:03:01
【问题描述】：

我有一个表格。这是一个时间表，有点。它在周一至周日的每一天都有下拉表单字段，用于显示每天的工作时间。每个下拉列表中的值范围从 0.00 到 12.00，增量为 0.25（即 0.00、0.25、0.50、0.75、1.00 ... 11.00、11.25、11.50、11.75、12.00）。我试图将一周中所有天数的总和计算到另一个文本表单字段中。这是我的 JS

$(document).ready(function () {

var mon, tue, wed, thu, fri, sat, sun, total;
if ($('#form_36379').length) {
$(document).change(function () {
mon = $('#element_47').val();
tue = $('#element_49').val();
wed = $('#element_51').val();
thu = $('#element_53').val();
fri = $('#element_55').val();
sat = $('#element_57').val();
sun = $('#element_58').val();
total = parseFloat(mon) + parseFloat(tue) + parseFloat(wed) + parseFloat(thu) + parseFloat(fri) + parseFloat(sat) + parseFloat(sun);
$('#element_60').val(parseFloat(total).toFixed(2));

});
}
});

我的结果是 NaN 或其他一些连接值。

NaN 出现在总元素中，直到所有字段都选择了一个值。一旦所有元素都有一个值，我就会得到一个计算。示例：Mon = 2.75，Tue = 2.75，Wed = 2.75，Thu = 2.75，Fri = 2.75，Sat = 2.75，Sun = 2.75，然后总场 (element_60) = 56，此时应该总计 19.25

有人可以指出我缺少什么的正确方向吗？

【问题讨论】：

那么#element_47到#element_58的值不是你所期望的，比如无法转换为数字（因此NaN） .你没有告诉我们它们的价值，所以这就是我能给你的所有帮助，这些元素的价值是什么？
尝试一次添加一天，看看是哪一个导致您的代码变为 NaN.. 否则提供更完整的示例
NaN 出现在总元素中，直到所有字段都选择了一个值。一旦所有元素都有一个值，我就会得到一个计算。示例：Mon = 2.75，Tue = 2.75，Wed = 2.75，Thu = 2.75，Fri = 2.75，Sat = 2.75，Sun = 2.75，然后总场 (element_60) = 56，此时应该总计 19.25

标签： javascript forms dropdown

【解决方案1】：

您可以尝试监听下拉列表的更改事件，例如：

我有 3 个下拉菜单

    <select class="day-dropdown dropdown1">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>
    <select class="day-dropdown dropdown2">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>
    <select class="day-dropdown dropdown3">
      <option value="0.00"><option>
      <option value="0.25"><option>
      <option value="0.50"><option>
    </select>

JS代码

$('.day-dropdown').on('change', function(){
    var dropdowns = $('.day-dropdown'),
        total = 0;

    $.each(dropdowns, function(index, elem){
       var optionSelectedVal = $(this).find('option:selected').val();
       if(optionSelectedVal){
          optionSelectedVal = parseInt(optionSelectedVal);
          total+= optionSelectedVal;
       }
    });
    if(total > 0){
       $('.input-class').val(total.toFixed(2));
    }
});

祝福。

【讨论】：