Javascript 将“选择”菜单中的选项汇总到另一个表格单元格中

我有一个简单的HTML表格，允许用户从选择菜单中进行选择，然后在下一列中输入数量

我需要能够自动计算每个选择的数量列的总数-行数不是固定的，但总是至少有一行。我在这里创建了我的表格的简化版本：

在这里，用户只能选择3种不同的水果（苹果、香蕉、芒果），然后输入每个水果的数量。一旦用户选择水果和/或输入数量，我会自动计算每个水果的总数。在我的示例中，总计为：

苹果总数：20 总数：30 芒果总数：5

如果这有帮助的话，我很乐意使用jQuery——我一直在搜索，但找不到类似的解决方案示例，该解决方案从选择菜单计算每行中的选择数，然后计算该行中另一列的总数

---

如果有人能告诉我如何做到这一点，或者你能举出任何类似的例子，我将不胜感激。我是Javascript新手。

在KnockoutJS上进行测试。与JQuery相比，Knockout更适合处理模型。（他们互相称赞）。

参加淘汰赛。与JQuery相比，Knockout更适合处理模型。（他们互相称赞）。

我加了一个苹果总数的例子。看这个

---

​

我添加了一个苹果总数的示例。看这个

​

这是一个示例，请检查此链接

这是一个示例，请检查此链接

---

我会给你看一个香蕉样品，我相信你会知道如何将其推广到你的其他产品中

// Filter only returns the values where the inner function returns true
var bananas = $( '.fruits' ).filter( function() {

    // this selector returns the selected options
    if ( $( ':selected', this ).val() === 'Banana' ) {
         return true;
    }
}

// Now, for each banana, get its quantity, and add to the total
bananas.each( function() {
    // Get the quantity
    var qty = $( this ).next().find( 'input' ).val();

    // Add it to the bananas quantity
    // parseInt transforms a text to an integer
    var qty = qty + parseInt( $( '#sumBananas' ).text(), 10 );

    // And set the quantity in the "sumBananas" span
    $( '#sumBananas' ).text( qty );
} );

---

我会给你看一个香蕉的样品，我相信你会知道如何把它推广到你的其他产品上

// Filter only returns the values where the inner function returns true
var bananas = $( '.fruits' ).filter( function() {

    // this selector returns the selected options
    if ( $( ':selected', this ).val() === 'Banana' ) {
         return true;
    }
}

// Now, for each banana, get its quantity, and add to the total
bananas.each( function() {
    // Get the quantity
    var qty = $( this ).next().find( 'input' ).val();

    // Add it to the bananas quantity
    // parseInt transforms a text to an integer
    var qty = qty + parseInt( $( '#sumBananas' ).text(), 10 );

    // And set the quantity in the "sumBananas" span
    $( '#sumBananas' ).text( qty );
} );

---

谢谢梁亮-这在我的快速测试中效果很好。非常感谢。谢谢梁亮-这在我的快速测试中效果很好。非常感谢。

// Filter only returns the values where the inner function returns true
var bananas = $( '.fruits' ).filter( function() {

    // this selector returns the selected options
    if ( $( ':selected', this ).val() === 'Banana' ) {
         return true;
    }
}

// Now, for each banana, get its quantity, and add to the total
bananas.each( function() {
    // Get the quantity
    var qty = $( this ).next().find( 'input' ).val();

    // Add it to the bananas quantity
    // parseInt transforms a text to an integer
    var qty = qty + parseInt( $( '#sumBananas' ).text(), 10 );

    // And set the quantity in the "sumBananas" span
    $( '#sumBananas' ).text( qty );
} );

$('#fruits')
    .on('change', 'select', calc)
    .on('keyup', 'input', calc);

$(document).ready(calc);

function calc(){
    var total = {};
    $('#fruits tr:has(.fruit)').each(function(){

       var $t = $(this), 

           // val : Apple | Banana | Mango
           val = $t.find('.fruit select').val(),
           qty = $t.find('input').val();

        // the qty
        qty = Number(qty);
        qty = isNaN(qty)?0:qty;

        if(!total.hasOwnProperty(val)) total[val] = 0;
        total[val] += qty;
    });

    // you would be updating the actual html here.    
    for(val in total){
        if(total.hasOwnProperty(val)){
    // NOTE that I change your 'sumApples' to 'sumApple' which follows convention of 'sum' + { the name of the fruit }
            $('#sum' + val).html(total[val]);
        }                
    }
}
​