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

Question

I have a multi-field add function and would like to get the price from every field row's selected option then calculate with quantity and sum in the total

But i get stuck in jquery part that cannot get price and calculate each row

$(".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">

</div>

Answer 1

May be it'll help

First you didn't include jquery version. And second you didn't check for undefined values of payselect dropdown

$(".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