jQuery多个onChange

Question

view screenshot web

In my case, each chose "PILIH PAKET JENIS HARGA" then every row in the column "Harga" will be filled equal in value

whereas I want is every option on "PILIH PAKET JENIS HARGA" to change the line in the "Harga" in addition to also change each corresponding to the result of multiplying the column "Qty".

here my code:

<script type="text/javascript">

    $(document).ready(function(){

    // Tambah Row tabel
        $('#btn_paket_show').click(function(){          
            $('.tabel_paket tbody').append('<tr class="baris"><td style="width:50px; text-align:center; vertical-align:middle;"><input type="hidden" name="msg[]"><button name="btn_paket_hide[]" type="button" class="btn btn-danger btn-xs btn_paket_hide"><span class="glyphicon glyphicon-trash"></span></button></td><td><input type="text" class="form-control jml_paket" id="jml_paket" name="jml_paket[]" value"" placeholder="0"></td><td><select class="form-control nm_paket_hrg" id="nm_paket_hrg" name="nm_paket_hrg[]" ><option>PILIH JENIS PAKET HARGA</OPTION><?php foreach($list_paket as $s){?><option value="<?php echo ($s->id_item_paket_hrg."~".$s->nm_paket_hrg."~".$s->hrg);?>"><?php echo $s->hrg;?> @ <?php echo $s->nm_paket_hrg;?></option><?php }?></select></td><td><input class="form-control harga" id="harga[]" name="harga[]" type="text"></td></tr>');
        });

        $(document).on('change', '.nm_paket_hrg', function(){           
            var a_a = $(this).val();
            var a = a_a.split("~");
            var b = $('.jml_paket').val();
            var c = a[2]*b;

            $('.harga').val(c);
        });
</script>


<!-- TAMBAH PAKET -->
<button type="button" class="btn btn-info" id="btn_paket_show"><span class="glyphicon glyphicon-plus"> TAMBAH PAKET</button>
<table class="table table-striped table-bordered table-hover tabel_paket">
    <thead class="thead-2">
        <tr class="tr-2">
            <th class="th-2" style="width:50px; text-align:center;"><span class="glyphicon glyphicon-trash"></span></th>
            <th class="th-2" style="width:150px">QTY (Kg/Pcs)</th>
            <th class="th-2" style="width:300px">Nama Paket Harga</th>
            <th class="th-2" style="width:200px">Harga (Rp)</th>
        </tr>
    </thead>
    <tbody class="tbody-2">
    </tbody>
    <thead class="thead-2">
        <tr class="tr-2">
            <th class="th-2" colspan="3" style="text-align:right; vertical-align:middle">Total Harga (Rp)</th>
            <th class="th-2"><input class="form-control" id="total_harga" name="total_harga" type="text" placeholder="0"></th>
        </tr>
    </thead>
</table>

any soulution?

Answer 1

If you only want to set the value of the .harga element in the same row as the .nm_paket_hrg element, you need to limit this line:

$('.harga').val(c);

...since as-is, it matches all .harga elements and so sets the value of all of them.

Since this in the handler references the .nm_paket_hrg that changed, you can use it to navigate to the row and from there to the .harga:

$(this).closest("tr").find(".harga").val(c);

You probably want to do that for this line as well:

var b = $('.jml_paket').val();

...since that will read the value of the first element matching .jml_paket.

So:

$(document).on('change', '.nm_paket_hrg', function() {
    var $this = $(this);                    // Reuse this
    var $row = $this.closest("tr");         // Find the row
    var a_a = $this.val();
    var a = a_a.split("~");
    var b = $row.find('.jml_paket').val();  // Just the one on this row
    var c = a[2] * b;

    $row.find(".harga").val(c);             // Just the one on this row
});