如何使用jQuery ajax更改功能根据同一行表自动更改选择答案

【问题标题】：How to auto change select in accordance with same row table using jQuery ajax change function如何使用jQuery ajax更改功能根据同一行表自动更改选择
【发布时间】：2018-11-11 17:48:08
【问题描述】：

我在表格区域有表单输入动态行。我在第一行的第一个模式使用自动填充字段更改 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();}

【问题讨论】：

您是否对多个元素使用相同的 id？从您发布的代码来看，它看起来像。

标签： javascript jquery html forms html-table

【解决方案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))
 }

你的 selected() 函数是这样的：

$(".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 负责您使用的每个行号，因此您应该更改您使用的每个输入以在其 id 中有一个索引并且名称与它们的行号相同

因此，对于每个选择输入，您将获得不同的目标 spesifikasi

P.S : 如果您仍然不清楚，请询问更多

【讨论】：

还是一样的结果。我已经按照说明进行了更改。自动更改仍然是第一个元素。 gresik 的问候
当我添加新行时，然后在浏览器上检查元素。数据规范保持在索引 0 中不增加
@epm.007 我已经编辑了答案，试试看。哈哈来自sby的问候

【解决方案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，因此您有多次需要更改的 id，或者您有不同的 id，然后您需要在第二个函数中使用那个。

【讨论】：