Javascript 如何使用数据库MYSQL在下拉列表中选择选项以显示输入中的数据？

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

这是我的HTML

<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>

纳马巴朗
哈尔加
数量
萨图
总费用
+
--西拉坎·皮利--
似乎是选择器的问题（本例中为ID）。
如果我正确理解您的场景，当添加一行然后选择“Nama Barang”时，您希望“Harga”列填充与所选下拉值关联的“Harga”值，对吗

添加行时，每个输入的ID都与前一行的输入相同。因此，在调用changevalue（）函数时，javascript将选择ID为“harga”的第一个元素。因此，您将始终更新第一行。小心
你能帮我写代码吗？我试过了，但我不能记住你应该发布“我不能”的原因，而不是要求完整的代码。不过，我确实清理了您的代码，并在更新的答案中添加了更改。
<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>

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;
}