Javascript/Jquery:如何在动态表上显示与所选值匹配的值

Question

我有一个动态表，点击按钮添加新行。每一行都有一个产品名称的选择值和一个产品价格的输入值。我想显示产品的价格取决于所选的值。对于backed，我使用了Laravel 7。下面我添加了我的代码：

表：

<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
<tr>
<td>
<select name="product_id[]" class="form-control" id="product-name">
<option value="" selected disabled>Select Product</option>
@foreach($product as $row)
<option value="{{ $row->id }}">{{ $row->name }}</option>
@endforeach
</select>
</td>
<td>
@foreach($product as $row)
<input  id="price_{{ $row->id }}" value="{{ $row->price }}" type="number"  class="form-control price"  style="display:none;">
@endforeach
</td>
<td><button class="remove">Delete</button></td>
</tr>
</tbody>
</table>

这是一个脚本，点击按钮添加新行：

$(function() {
const $tb = $('#product-table tbody');
$(".delete").eq(0).hide()
$("#productAdd").on("click",function() {
const $row = $tb.find("tr").eq(0).clone();
$(".delete",$row).show(); // show the hidden delete on this row
$row.find("select").val(""); // reset the select
$row.find("[type=number]").val(); // reset the numbers
$tb.append($row);
});
$tb.on('click', '.remove', function() {
$(this).parents('tr').remove();
});
});

在这里，我展示了所有的产品价格和所有的隐藏。我想显示与所选值匹配的价格值。为此，我使用了id = price_{{ $row->id }}

@foreach($product as $row)
<input  id="price_{{ $row->id }}" value="{{ $row->price }}" type="number" class="form-control price"  style="display:none;">
@endforeach

这是我的脚本，其中显示了产品价格：

$('#product-name').on('change',function(){
$(".price").hide();
var price = $(this).find('option:selected').val();
$("#price_" + price).show();});

但这只适用于第一排。如何合并此脚本，使其适用于表中添加的每一个新行？

$(function() {
const $tb = $('#product-table tbody');
$(".remove").eq(0).hide()
$("#productAdd").on("click",function() {
const $row = $tb.find("tr").eq(0).clone();
$(".remove",$row).show(); // show the hidden delete on this row
$row.find("select").val(""); // reset the select
$row.find("[type=number]").val(); // reset the numbers
$tb.append($row);
});
$tb.on('click', '.remove', function() {
$(this).parents('tr').remove();
});
});
$('#product-name').on('change',function(){
$(".price").hide();
var price = $(this).find('option:selected').val();
$("#price_" + price).show();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
<tr>
<td>
<select name="product_id[]" class="form-control" id="product-name">
<option value="" selected disabled>Select Product</option>
<option value="1">Pant</option>
<option value="2">Shirt</option>
<option value="3">T-shirt</option>
</select>
</td>
<td>
<input  id="price_1" value="100" type="number"  class="form-control price"  style="display:none;">
<input  id="price_2" value="200" type="number"  class="form-control price"  style="display:none;">
<input  id="price_3" value="50" type="number"  class="form-control price"  style="display:none;">
</td>
<td><button class="remove">Delete</button></td>
</tr>
</table>

Answer 1

有了适当的授权，它将在中工作

正如我在另一个答案中所说，不要使用ID

这是一个工作版本。看我把ID改成了类

$(function() {
const $tb = $('#product-table tbody');
$(".remove").eq(0).hide()
$("#productAdd").on("click", function() {
const $row = $tb.find("tr").eq(0).clone();
$(".remove", $row).show(); // show the hidden delete on this row
$row.find("select").val(""); // reset the select
$row.find("[type=number]").val(); // reset the numbers
$tb.append($row);
});
$tb.on('click', '.remove', function() {
$(this).closest('tr').remove();
});
$tb.on('change', '.product-name', function() {
const $row = $(this).closest('tr');
$(".price", $row).hide();
const whichPrice = $(this).val();
if (whichPrice != "") $(".price", $row).eq(whichPrice-1).show()
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="productAdd" type="button"> Add Row</button>
<table id="product-table" class="table table-bordered text-center">
<tr>
<td>
<select name="product_id[]" class="form-control product-name">
<option value="" selected disabled>Select Product</option>
<option value="1">Pant</option>
<option value="2">Shirt</option>
<option value="3">T-shirt</option>
</select>
</td>
<td>
<input value="100" type="number" class="form-control price" style="display:none;">
<input value="200" type="number" class="form-control price" style="display:none;">
<input value="50" type="number" class="form-control price" style="display:none;">
</td>
<td><button class="remove">Delete</button></td>
</tr>
</table>