jQuery从选择更改中计算多字段数量价格和总计

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);
});

小提琴