根据选择选项填充文本字段

Question

选择某些选项时，我试图获取“ hargaJual”值。但是，当我在表格中插入新行并选择新选项时，它将仅更改“ Harga”的第一行，而将第二行留空。

这是结果：

<td>
<select class="custom-select" id="kodeSparepart" name="kodeSparepart[]">
    <option value=""> --Pilih Sparepart-- </option>";
    @foreach($sparepart as $s) {
            <option value="{{ $s['kodeSparepart'] }}" data-price="{{ $s->hargaJual }}"> {{ $s['namaSparepart'] }} </option>";
     }
    @endforeach
 </select>
 </td> 
 <td> 
    <input class="form-control" type="text" id="hargaJualTransaksi" name="hargaJualTransaksi[]" autocomplete="off" readonly> 
 </td>

这是我的JavaScript

    //for insert new row in table
 $(function(){
    $('#addMore').on('click', function() {
            var data = $("#tb tr:eq(1)").clone(true).appendTo("#tb");
            data.find("input").val('');
    });

    $(document).on('click', '#remove', function() {
        var trIndex = $(this).closest("tr").index();
            if(trIndex>=1) {
            $(this).closest("tr").remove();
        } else {
            alert("Sorry!! Can't remove first row!");
        }
    });
});    
//fill hargaJualTransaksi field
$(function() {
    $('#kodeSparepart').on('change', function(){
        var price = $(this).children('option:selected').data('price');
        $('#hargaJualTransaksi').val(price);
    });
});

Answer 1

尝试以下代码：

template = pd.ExcelWriter('template.xls')
df.to_excel(template, startrow = 75, startcol = 3)
template.save()

Answer 2

您需要使用事件委托，因为行是动态呈现到DOM的：

$(function() {
    $('body').on('change', '.kodeSparepart', function(){
        var price = $(this).children('option:selected').data('price');
        $('.hargaJualTransaksi').val(price);
    });
});

注意：：id属性必须是唯一的，因此您需要将每个kodeSparepart和hargaJualTransaksi更改为类而不是id，它将类似于：

<input class="form-control hargaJualTransaksi" type="text" name="hargaJualTransaksi[]" autocomplete="off" readonly>