jquery从select onchange计算多字段数量价格和总数

Question

我有一个多字段添加功能，想要从每个字段行的选定选项中获取价格，然后计算总数中的数量和总和

但我陷入jquery部分，无法获得价格并计算每一行

$(".payselect").on("change", function() {

  var price = 0;
  var pricenumber = 0;
  $(".payselect").find("option:selected").each(function() {
    price += $(this).data("price");
  });
  $('.paynumber').val(1);
  $('.payunit').val(price);

  var unitprice = $('.payunit').val();
  var unitnumber = $('.paynumber').val();

  pricenumber = unitprice * unitnumber;

  $("#paytotal").val(pricenumber);

});

$(".payselect").on("change", function() {

  var price = 0;
  var pricenumber = 0;
  $(".payselect").find("option:selected").each(function() {
    price += $(this).data("price");
  });
  $('.paynumber').val(1);
  $('.payunit').val(price);

  var unitprice = $('.payunit').val();
  var unitnumber = $('.paynumber').val();

  pricenumber = unitprice * unitnumber;

  $("#paytotal").val(pricenumber);

});

$(document).on("change", ".payunit", function() {
  var sum = 0;
  $(".payunit").each(function() {
    sum += +$(this).val();
  });
  $("#paytotal").val(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="worked">

  <th>Item Name</th>
  <th>Quantity</th>
  <th>Unit Price</th>


  <tbody>
    <tr>
      <td>
        <select class="payselect" name="item_name[]" title="Select Item.." required>
        <option selected>Select...</option>
          <option data-price="20" value="Hat">Hat</option>
          <option data-price="10" value="Hat">Shirt</option>
        </select>
      </td>

      <td>
        <input class="paynumber" name="item_quantity[]" type="number">
      </td>

      <td>
        <input type="number" name="item_unit_price[]" value="" class="payunit">
      </td>
    </tr>

    <tr>
      <td>
        <select class="payselect" name="item_name[]" title="Select Item.." required>
        <option selected>Select...</option>
          <option data-typeid="20" value="Hat">Hat</option>
          <option data-typeid="10" value="Hat">Shirt</option>
        </select>
      </td>

      <td>
        <input class=" paynumber" name="item_quantity[]" type="number">
      </td>

      <td>
        <input type="number" name="item_unit_price[]" value="" class="payunit">
      </td>
    </tr>
  </tbody>
</table>
<br>
<label>Total Amount</label>

<input type="number" name="sp_price" value="" id="paytotal" class="total">

Answer 1

可能是它的帮助

首先，你没有包含jquery版本。第二，你没有检查payselect下拉列表的未定义值

$(".payselect").on("change", function() {
  var price = 0;
  var pricenumber = 0;
  $(".payselect").find("option:selected").each(function() {
    if($(this).data("price")){
        price += parseInt($(this).data("price"));
    }
  });
  $('.paynumber').val(1);
  $('.payunit').val(price);

  var unitprice = $('.payunit').val();
  var unitnumber = $('.paynumber').val();

  pricenumber = unitprice * unitnumber;

  $("#paytotal").val(pricenumber);

});

fiddle