Question

我正在尝试添加下拉列表值的总和，以便在底部给出总值...

这是我的javascript：

<script src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
$("#overtimehours").change(function() {
    var total = 0;
    $.each($(".overtimehours") ,function() {
        total += parseInt($(this).val());
    });
    $("#sum").val(total)
});
    </script>

继承人我的php：

print "<td><div align=\"center\"><select name=\"overtimehours["; echo $transnum; print "]\"><option value=\"$ot_hours\">$ot_hours</option>"; overtimehours_list(); 
print "</select></div></td>\n";

print "<td><div align=\"center\"><b><input id=\"sum\" type=\"text\"/></b></td></tr>\n"; //add up OT hrs

已解决 ::这是JSFIDDLE DEMO FIX：http://jsfiddle.net/st8Y3/6/

Answer 1

您将overtimehours称为id和类名，但您的输入既没有id或类名。我建议为每个要计算的输入添加一个名为overtimehours的类，并将选择器更改为$('.overtimehours')而不是$('#overtimehours')。

Answer 2

让你的PHP保持不变并执行此操作......

$(document).on('change', 'select[name="overtimehours"]', function(){
    var total = 0;
    $('select[name="overtimehours"]').each(function() {
        total += parseInt($(this).val());
    });
    $('#sum').val(total)
});

编辑：

PHP：

print "<td><div align=\"center\"><select class=\"overtimehours\" name=\"overtimehours["; echo $transnum; print "]\"><option value=\"$ot_hours\">$ot_hours</option>"; overtimehours_list(); 
print "</select></div></td>\n";

print "<td><div align=\"center\"><b><input id=\"sum\" type=\"text\"/></b></td></tr>\n"; //add up OT hrs

JAVASCRIPT：

$(document).on('change', '.overtimehours', function(){
    var total = 0;
    $('.overtimehours').each(function() {
        total += parseInt($(this).val());
    });
    $('#sum').val(total)
});

DEMO：http://jsfiddle.net/dirtyd77/st8Y3/3/

Answer 3

将班级overtimeshours添加到您的选择声明中。

print "<td><div align=\"center\"><select class=\"overtimehours\" name=\"overtimehours["; echo $transnum; print "]\"><option value=\"$ot_hours\">$ot_hours</option>"; overtimehours_list();

将您的jQuery更改为：

$(".overtimehours").change(function() {
    var total = 0;
    $.each($(".overtimehours") ,function() {
        total += parseInt($(this).val());
    });
    $("#sum").val(total)
});

更多关于Class Selectors

添加多个下拉列表的总和

3 个答案: