如何用jquery改变选择选项的总数?

Question

我有一个表，上面有默认金额和预数字选择选项。当选择一个新的价格将改变每一行的输入。这里，我希望select中的新数字自动计算总价到下一行。

$('select.set_price').change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
//calc
$('.price').keyup(function() {
var i_pay = $(this).closest('tr').find('#pay').text();
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('#pay').html(total);
});

<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 id="pay">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 id="pay">800</p>
</td>
</tr>
</table>

我所期望的是当我选择5时。第一行是5*900=4500，第2行是5*800=4000。请在这里找到小提琴:https://jsfiddle.net/w56940ez/

Answer 1

首先将$('.price').keyup(function(){});更改为$('.price').change(function(){});，否则您将无法使用箭头更改总价值。如果你不想使用箭头，你可以保留keyup事件。

要自动更改total列的值，您只需要在ìnput元素上使用trigger("change")。

如果你想让基本值始终是800和900，你应该使用一个数据属性(data-first-value)来保持这个值，并在计算过程中使用。

标识符必须是唯一的，就像@j08691所说的。所以你基本上有两个解决方案:

• 使用pay类代替payid。您只需要将id="pay"替换为class="pay"，将#pay替换为.pay
• 使用两个标识符。你需要添加另一个数据属性(data-id)并使用它来获得你想要的输入。

$('select.set_price').change(function() {
var pset = $(this).data('pset');
input_elements = $('td.' + pset).find('input.price');
input_elements.val($(this).val());
input_elements.trigger("change");
});
//calc
$('.price').change(function() {
/*
USING A CLASS FOR BOTH 

var i_pay = $(this).closest('tr').find('.pay').attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$(this).closest('tr').find('.pay').html(total);

*/

var i_pay = $("#"+$(this).attr("data-id")).attr("data-first-val");
var i_bet = $(this).val();
var total = (i_pay * i_bet);
$("#"+$(this).attr("data-id")).html(total);
});

<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" data-id="pay_1" />
</td>
<td class="align-middle text-center">
<p id="pay_1" data-first-val="900">900</p>
<!--<p class="pay" data-first-val="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" data-id="pay_2"/></td>
<td class="align-middle text-center">
<p id="pay_2" data-first-val="800">800</p>
<!--<p class="pay" data-first-val="800">800</p>-->
</td>
</tr>
</table>