我正在嘗試制作一個動態表單，其中包括能夠動態添加行并且與選擇相同我獲取選擇的值并將它們放入第一行的輸入中，我想知道如何填寫其他選擇，因為它只適用于我選擇的第一行
function cambioOpciones(e) {
const combo = document.getElementById('opciones'),
[FECHA, MONEDA, NUMCTA, FAMILIA, CONCEPTO, FACTURA, DENOMINACION_SOCIAL, VENDEDOR] = document.getElementById('opciones').value.split('_');
document.getElementById('fecha').value = FECHA;
document.getElementById('moneda').value = MONEDA;
document.getElementById('numcta').value = NUMCTA;
document.getElementById('familia').value = FAMILIA;
document.getElementById('Concepto').value = CONCEPTO;
document.getElementById('showId').value = FACTURA;
document.getElementById('denominacion').value = DENOMINACION_SOCIAL;
document.getElementById('vendedor').value = VENDEDOR;
}
$(document).ready(function() {
let row_number = 1;
$("#add_row").click(function(e) {
e.preventDefault();
let new_row_number = row_number - 1;
$('#venta' row_number).html($('#venta' new_row_number).html()).find('td:first-child');
$('#ventas_table').append('<tr id="venta' (row_number 1) '"></tr>');
row_number ;
});
$("#delete_row").click(function(e) {
e.preventDefault();
if (row_number > 1) {
$("#venta" (row_number - 1)).html('');
row_number--;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<td>
<select name="products[]" class="form-control" id="opciones" onchange='cambioOpciones();'>
@foreach ($ventas1 as $ventas)
<option value="{{$ventas->FECHA}}_{{$ventas->MONEDA}}_{{$ventas->NUMCTA}}_{{$ventas->FAMILIA}}_{{$ventas->CONCEPTO}}_{{$ventas->FACTURA}}_{{$ventas->DENOMINACION_SOCIAL}}_{{$ventas->VENDEDOR}}">
{{ $ventas->FACTURA }}---{{$ventas->CONCEPTO }}
</option>
@endforeach
</select>
</td>uj5u.com熱心網友回復：
您需要委托才能讓一個腳本處理動態插入的元素。
也使用類，因為 ID 需要是唯一的
$(document).ready(function() {
const cambioOpciones = () => {console.log("changed") }
const $tb = $("#tb");
$tb.on("click", ".add_row", function(e) {
$tb.append($tb.find("tr").eq(0).clone(true))
});
$tb.on("click", ".delete_row", function(e) {
const $row = $(this).closest("tr");
if ($row.prev().length>0) $row.remove()
});
$tb.on("change", "[name='products[]']", cambioOpciones)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody id="tb">
<tr>
<td>
<select name="products[]" class="form-control">
<option value="val">val</option>
<option value="val">val</option>
<option value="val">val</option>
</select>
</td>
<td><button type="button" class="add_row">Add</button></td>
<td><button type="button" class="delete_row">delete</button></td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515969.html