如何使用jQuery根据select下拉选项取值自动计算表格每行总价

首先调整原有代码的两处核心问题：

1. 移除重复的payID，改为class属性，同时新增data-base属性存储每行原始默认金额，避免计算后原始值被覆盖
2. 下拉选择赋值后手动触发输入框的计算事件，同时修改计算逻辑取原始基准金额进行计算

修正后HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th class="align-middle text-center">#</th>
    <th>
      <select class="form-select set_price" data-pset="p_3hi">
        <option value="" disabled selected>Order</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </th>
    <th>total</th>
  </tr>
  <tr>
    <td class="align-middle text-center">1</td>
    <td class="w-10 p_3hi"><input type="number" class="form-control price" name="price1" value="1" /></td>
    <td class="align-middle text-center">
      <p class="pay" data-base="900">900</p>
    </td>
  </tr>
    <tr>
    <td class="align-middle text-center">2</td>
    <td class="w-10 p_3hi"><input type="number" class="form-control price" name="price2" value="1" /></td>
    <td class="align-middle text-center">
      <p class="pay" data-base="800">800</p>
    </td>
  </tr>
</table>

修正后JS代码 #

$('select.set_price').change(function() {
  var pset = $(this).data('pset');
  // 赋值后触发input事件，自动调用计算逻辑
  $('td.' + pset).find('input.price').val($(this).val()).trigger('input');
});
// 改用input事件，覆盖手动输入、JS触发等所有值变更场景
$('.price').on('input', function() {
  // 取存储的原始基准金额计算，避免原始值被覆盖
  var i_pay = Number($(this).closest('tr').find('.pay').data('base'));
  var i_bet = Number($(this).val()) || 0;
  var total = i_pay * i_bet;
  $(this).closest('tr').find('.pay').text(total);
});

内容的提问来源于stack exchange，提问作者Wilf