Question

我有一个动态的产品清单，我需要知道用户选择的产品总数，例如product1的5个，product5的5个和product9的6个，所以计数器的值必须是15（选择每种产品的加法）

<select name="product1" id="product1" class="list-of-products">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
</select>

... 通过php调用动态生成的x产品 ...

<select name="productx" id="productx" class="list-of-products">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
 </select>

所以我的柜台就像

 <div id="counter">
   <span id="counter-value">counter</span>
 </div>

我一直在考虑使用jquery来做这件事，比如

$(document).ready(
  function() {

    var total = 0;
    $('.list-of-products :selected').each(function(i, selected){
      total= total+ parseInt($(selected).text());
    });

    $('#counter-value').text(total);
  }
);

Answer 1

你接近解决方案。请检查我的小提琴：

$(document).ready(function () {
    $('.list-of-products').change(function () {
       var products = $('.list-of-products :selected');
       var tot = calculateTotal(products);
       $('#counter-value').text(tot);
    });
});

// Function
function calculateTotal(product_list) {
    var total = 0;
    product_list.each(function (i, selected) {
        total = total + parseFloat($(selected).text());
    });

    return total;
}

http://jsfiddle.net/hoja/3pznw838/

许多选择的实时计数器

1 个答案: