Как автоматически изменить выбор в соответствии с той же таблицей строк, используя функцию изменения jjuery ajax

Question

У меня есть форма ввода динамически строки в области таблицы.Моя первая схема в первом ряду работает хорошо, используя ajax-функцию автоматического изменения поля заполнения:

, но у меня есть проблемы и во втором, и в следующем ряду.Когда я изменяю опцию выбора во второй строке, изменилось предыдущее поле (не то же, что и у меня):

Как автоматически заполнить ту же строку с помощью опции выбора..?

Вот мой HTML-код:

<?php echo form_open_multipart(base_url().'back/transaksi/Order/insert_temp', array('role' => 'form', 'class' => 'form-horizontal', 'method'=>'POST','id'=>'Validation_form'));?>
                        <fieldset style="min-width: 0;padding:.35em .625em .75em!important;margin:0 2px;border: 2px solid black!important;margin-bottom: 10em;">
                            <legend style="border-bottom: none;width: inherit !important; padding:inherit; font-weight:bold; color:red;">Form Input</legend>
                            <button class="btn btn-success add_field_button" type="button" onClick="addRow('dataTable')">Add </button>
                            <input type="button" class="btn btn-danger" value="Remove" Field" onClick="deleteRow('dataTable')"/>
                            <div>&nbsp;</div>
                            <table id="dataTable" class="table table-striped table-responsive table-bordered dataTable" width="100%">
                                <thead>
                                    <tr>
                                        <th><input type="checkbox" id="selectall" value="selectAll"/></th>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Item</th>
                                        <th class="text-center">Konversi</th>
                                        <th class="text-center">Spesifikasi</th>
                                        <th class="text-center">qty</th>
                                        <th class="text-center">Satuan</th>
                                        <th class="text-center">Note</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                    <td><input type="checkbox" class="check"></td>
                                        <td id="no">

                                        </td>
                                        <td>
                                            <select name="id_komoditi[]" id="id_komoditi" class="form-control chzn_select_L">
                                                <option value="">--- Pilih Item ---</option>
                                                <?php  
                                                    foreach($id_komoditi as $a)
                                                    {
                                                    echo "<option value='".$a['id_komoditi']."'>".$a['nama_komoditi']."</option>";
                                                    }
                                                ?>
                                            </select>
                                        </td>
                                        <div class="input_fields_wrap1">
                                            <div><input type="hidden" name="id_order[]" id="id_order" value="<?php echo $_GET['id'];?>"></div>
                                        </div>
                                        <div class="input_fields_wrap">
                                            <div><input type="hidden" name="item[]"></div>
                                        </div>
                                        <td>
                                            <select name="id_konversi_satuan[]" id="id_konversi_satuan" class="form-control chzn_select_R">
                                                <option value="">--- Pilih Konversi ---</option>
                                                <?php  
                                                foreach($id_konversi_satuan as $a)
                                                {
                                                    echo "<option value='".$a['id_konversi_satuan']."'>".$a['satuan_awal']."</option>";
                                                }
                                                ?>
                                            </select>
                                        </td>
                                        <td><input name="spesifikasi[]" id="spesifikasi" type="text" class="form-control"></td>
                                        <td><input name="qty[]" id="qty" type="text" class="form-control"></td>
                                        <td><input name="satuan[]" id="satuan" type="text" class="form-control"></td>
                                        <td><textarea name="note[]" id="note" type="text" class="form-control"></textarea></td>
                                    </tr>
                                </tbody>
                            </table>
                            <button style="border-radius: 3px; box-shadow: 0 3px 6px rgba(0,0,0,0.9);" type="submit" class="btn btn-success">Entry</button>
                        </fieldset>
                    </form>

Вот мой код jQuery / Javascript // для схемы первого изменения

$(document).ready(function(){
    dataTable();
    $('#selectall').click(function(event)
    {
        if(this.checked)
        { 
            $('.check').each(function()
            { 
                this.checked = true; 
            });
        }
        else
        {
            $('.check').each(function() { 
                this.checked = false; 
            });        
        }
    });

    $('#id_komoditi').on('change',function(){
        $.ajax({
          url: '<?=base_url();?>back/transaksi/Order/Detail_Item',
          method: 'POST',
          data:{
            id_komoditi: $('#id_komoditi').val(),
          },
          dataType:'json',
          success:function(hasil)
          {
            $('#spesifikasi').val(hasil.spesifikasi);
          }
        });
    });
});

и вот динамически добавляемыйJavascript функция ввода строки:

function addRow(dataTable){
var table = document.getElementById(dataTable);
var rowCount = table.rows.length;
if(rowCount < 301)
{
    $(".chzn_select_L").chosen('destroy');
    $(".chzn_select_R").chosen('destroy');
    var row = table.insertRow(rowCount);
    var colCount = table.rows[1].cells.length;
    var wrapper  = $(".input_fields_wrap");
    var wrapper1  = $(".input_fields_wrap1");
    $(wrapper).append('<div><input type="hidden" name="item[]"/></div>');
    $(wrapper1).append('<div><input type="hidden" name="id_order[]" value="<?php echo $_GET['id'];?>"/></div>');
    for(var i=0; i<colCount; i++)
    {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    }
}
else
{
    alert("Maximum is 300.");   
}
$(".chzn_select_L").chosen().on('change',function(e){
    event.stopImmediatePropagation();
    var id_komoditi = $(this).val();
    $.ajax({
        url: '<?=base_url();?>back/transaksi/Order/Detail_Item',
        method: 'POST',
        data:{
            id_komoditi: id_komoditi,
        },
        dataType:'json',
        success:function(hasil)
        {
            $('#spesifikasi').val(hasil.spesifikasi);
        }
    });
});
$(".chzn_select_R").chosen();}

Answer 1

Проблема в том, что вы не указали здесь номер строки

success:function(hasil)
    {
        $('#spesifikasi').val(hasil.spesifikasi);
    }

, поэтому он изменил только первый элемент, так как не знал, какой вход "spesifikasi" будет изменен.

РЕШЕНИЕ у вас должно быть что-то вроде этого

   <select name="id_komoditi[]" id="id_komoditi" class="form-control chzn_select_L" data-spesifikasi="0">

и это на вашем первом входе spesifikasi

со значением data-spesifikasi совпадает с номером строки, которую нужно изменить.

, затем отредактируйте вашу addRow функцию в строке итерации, поэтому она даст значение номера строки длянеобходимый столбец ввода

for(var i=0; i<colCount; i++)
{
       var newcell = row.insertCell(i);
       newcell.innerHTML = table.rows[1].cells[i].innerHTML;
       cellToChange = $(newcell).find('.form-control');
       if($(cellToChange[0]).attr("class") == "form-control chzn_select_L")
         $(cellToChange[0]).data("spesifikasi", (rowCount-1))
       else if($(cellToChange[0]).attr("id") == "spesifikasi0")
         $(cellToChange[0]).attr("id", "spesifikasi"+(rowCount-1))
 }

и выбранная вами функция () должны быть такими:

$(".chzn_select_L").chosen().on('change',function(e){
event.stopImmediatePropagation();
var id_komoditi = $(this).val();
var spesifikasi_target = $(this).data("spesifikasi");
$.ajax({
    url: '<?=base_url();?>back/transaksi/Order/Detail_Item',
    method: 'POST',
    data:{
        id_komoditi: id_komoditi,
    },
    dataType:'json',
    success:function(hasil)
    {
        $('#spesifikasi'+spesifikasi_target).val(hasil.spesifikasi);
    }
});

});

Число / индекс 0 равенотвечает за каждый номер строки, который вы используете, поэтому вы должны изменить каждый вход, который вы используете, чтобы индекс в их идентификаторе и имени совпадал с номером строки

Поэтому выполучит разные целевые spesifikasi для каждого выбранного входа

PS: просто спросите большеесли вы все еще не знаете о них

Answer 2

Ваше первое изменение:

$('#id_komoditi').on('change',function(){
    //...
    success:function(hasil)
    {
        $('#spesifikasi').val(hasil.spesifikasi);
    }
});

Ваше второе изменение:

$(".chzn_select_L").chosen().on('change',function(e){
    //...
    success:function(hasil)
    {
        $('#spesifikasi').val(hasil.spesifikasi);
    }
});

Оба раза вы меняете #spesifikasi, поэтому либо у вас есть идентификатор несколько раз, который вам нужно изменить, или у вас другой идентификатор, чем вам нужно использовать его во второй функции.