如何通过数据库MYSQL下拉列表中的选择选项在输入中显示数据?

Question

我在数据库中选定项目后在输入中显示数据时遇到问题。 因为我使用动态行。 我从第一行选择数据，数据显示在第一行输入文本上。 然后我添加一个新行，并从第二行中选择数据。和数据显示在第一行输入文本上，而不是第二行？？

问题中的图像

这是我的网页

<table class="table-bordered table item" id="t1">
<thead>
<tr>
<th width="35%" class="text-center">Nama Barang</th>
<th width="19%"class="text-center">Harga</th>
<th width="12%" class="text-center">Qty</th>
<th width="14%" class="text-center">Satuan</th>
<th width="20%" class="text-center">Total Harga</th>
<th><button type="button" class="btn btn-success btn-sm addRow">+</button></th>
</tr>
</thead>
<tbody>
<tr class="item">
<td>
<select onchange="changeValue(this.value)" class="selectReason" id="reason" name="reasontxt[]" required>
<option value=""  selected="" disabled="">-- Silahkan Pilih --</option>
<optgroup label="Nama Bahan Baku">
<?php 
$query = mysqli_query($koneksi, "select * from bahan a, kategori_bahan b, satuan c WHERE a.id_kategori_bahan=b.id_kategori_bahan and a.id_satuan = c.id_satuan order by nm_bahan asc"); 
$result = mysqli_query($koneksi, "select * from bahan a, kategori_bahan b, satuan c WHERE a.id_kategori_bahan=b.id_kategori_bahan and a.id_satuan=c.id_satuan order by nm_bahan asc");  
$jsArray = "var prdName = new Array();n";
while ($row = mysqli_fetch_array($result)) {  
echo '<option value="' . $row['nm_bahan'] . '">' . $row['nm_bahan'] . '</option>';  
$jsArray .= "prdName['" . $row['nm_bahan'] . "'] = {id_satuan:'" . addslashes($row['nm_satuan']) . "',harga:'".addslashes($row['harga'])."'};n";
}
?>
</optgroup>
</select>
</td>
<td>
<input type="text" name="harga[]" placeholder="Harga" id="harga" class="form-control price amount" onkeypress="return hanyaAngka(event)" autocomplete="off" required />
</td>
<td>
<input type="text" name="qty[]" placeholder="Qty" class="form-control qnty amount" value="0" onkeypress="return hanyaAngka(event)" autocomplete="off" required />
</td>
<td>
<input type="text" name="satuan[]" placeholder="Satuan" id="id_satuan" class="form-control" onkeypress="return hanyaAngka(event)" readonly>
</td>
<td>
<input type="text" name="harga_total[]" placeholder="Total Harga" class="form-control totalharga" onkeypress="return hanyaAngka(event)" autocomplete="off" readonly />
</td>
</tr>
</tbody>
</table>

---

这是我的jQUERY和JavaScript

<script type="text/javascript">
<?php echo $jsArray; ?>
function changeValue(id){
document.getElementById('harga').value = prdName[id].harga;
document.getElementById('id_satuan').value = prdName[id].id_satuan;
};
window.onload=function(){
$(document).ready(function () {
var r = 1;
$('.addRow').click(function () {
r++;
$('#t1').append('<tr id="row' + r + '" class="item"><td><select onchange="changeValue(this.value)" class="selectReason" id="reason" name="reasontxt[]" required><option value=""  selected="" disabled="">-- Silahkan Pilih --</option><optgroup label="Nama Bahan Baku"><?php $query=mysqli_query($koneksi, "select * from bahan a, kategori_bahan b, satuan c WHERE a.id_kategori_bahan=b.id_kategori_bahan and a.id_satuan=c.id_satuan order by nm_bahan asc"); $result = mysqli_query($koneksi, "select * from bahan a, kategori_bahan b, satuan c WHERE a.id_kategori_bahan=b.id_kategori_bahan and a.id_satuan=c.id_satuan order by nm_bahan asc");  $jsArray = "var prdName = new Array();n";while ($row = mysqli_fetch_array($result)) {  echo '<option value="' . $row['nm_bahan'] . '">' . $row['nm_bahan'] . '</option>';  $jsArray .= "prdName['" . $row['nm_bahan'] . "'] = {id_satuan:'" . addslashes($row['nm_satuan']) . "',harga:'".addslashes($row['harga'])."'};n";}?></optgroup></select></td><td><input type="text" name="harga[]" placeholder="Harga" id="harga" class="form-control price amount" onkeypress="return hanyaAngka(event)" autocomplete="off" required /></td><td><input type="text" name="qty[]" placeholder="Qty" class="form-control qnty amount" value="0" onkeypress="return hanyaAngka(event)" autocomplete="off" required /></td><td><input type="text" name="satuan[]" placeholder="Satuan" id="id_satuan" class="form-control" onkeypress="return hanyaAngka(event)" readonly/></td><td><input type="text" name="harga_total[]" placeholder="Total Harga" class="form-control totalharga" onkeypress="return hanyaAngka(event)" autocomplete="off" readonly /></td><td><button type="button" name="remove" id="' + r + '" class="btn btn-danger btn-sm btn_remove">x</button></td></tr>');
$(".selectReason").select2({dropdownParent: $('#TambahData .modal-content'),width:'100%'});
});
$(document).on('click', '.btn_remove', function () {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
calcAll();
});
$(document).on("keyup", ".amount", calcAll);
});
function calcAll() {
$(".item").each(function () {
var qnty = 0;
var price = 0;
var totalharga = 0;
var diskon = 0;             
var uangmuka = 0;
if (!isNaN(parseInt($(this).find(".qnty").val()))) {
qnty = parseInt($(this).find(".qnty").val());
}
if (!isNaN(parseInt($(this).find(".price").val()))) {
price = parseInt($(this).find(".price").val());
}
if (!isNaN(parseInt($(this).find(".uangmuka").val()))) {
uangmuka = parseInt($(this).find(".uangmuka").val());
}
if (!isNaN(parseInt($(this).find(".diskon").val()))) {
diskon = parseInt($(this).find(".diskon").val());
}

totalharga = qnty * price;
$(this).find(".totalharga").val(totalharga.toFixed());
});
var sum = 0;
$(".totalharga").each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseInt(this.value);
}
});
$("#subtotal").val(sum.toFixed());

var diskon = 0;
if (!isNaN(parseInt($("#diskon").val()))) {
diskon = parseInt($("#diskon").val());
}

var total = 0;
if (!isNaN(parseInt($("#total").val()))) {
total = parseInt($("#total").val());
}
total = sum - (sum*(diskon/100));
$("#total").val(total.toFixed());
}
}
</script>

Answer 1

似乎是选择器的问题(在这种情况下为 ID(。 如果我正确理解您的情况，那么在添加一行然后选择"Nama Barang"时，您希望"Harga"列填充与所选下拉值关联的"harga"值，对吗？

添加行时，每个输入的 ID 与前一行的输入具有相同的 ID。因此，当调用 changevalue(( 函数时，javascript 将选择第一个具有 "harga" ID 的元素。因此，您将始终更新第一行。当心<tr id="row"，这也会导致你遇到麻烦。

首先，您应该使用class="harga"而不是id="harga"。

然后，您可以使用以下内容修改脚本：

在选择：onchange="changeValue(this)"在 JavaScript 中：

function changeValue(select){
var id = select.value;
var row = $(select).closest(".item");
row.find(".harga").value = prdName[id].harga;
row.find(".id_satuan").value = prdName[id].id_satuan;
}

---

我在这里通过我建议的更改简化了一些您的代码。 请记住，此代码未优化，仍然存在冗余和错误的做法(内联样式，重复代码，未优化的mysql查询(，并且尚未经过测试。希望这有帮助。