如何在數據庫MYSQL的下拉列表中選擇選項顯示輸入中的數據？

Question

在數據庫中選擇項目后，我在輸入中顯示數據時遇到問題。 因為我使用動態行。 我從第一行選擇數據，數據顯示在第一行輸入文本上。 然后我添加一個新行，並從第二行中選擇數據。 和數據顯示在第一行輸入文本上，而不是第二行？

圖片來自問題

這是我的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>

---

這是我的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 都與前一行的輸入相同。 因此，在調用 changevalue() 函數時，javascript 將選擇 ID 為“harga”的第一個元素。 因此，您將始終更新第一行。 當心<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 查詢），並且尚未經過測試。 希望這可以幫助。