如何使用jQuery ajax更改函数按照相同的行表自动更改选择

时间：2018-06-01 14:39:50

标签： javascript jquery html forms html-table

我在表区域上有动态表格输入。我在第一行的第一个模式使用自动填充字段更改ajax函数运行良好：

first schema running well

但我在第二行和下一行也有问题。当我更改第二行的选择选项时，前一个字段发生了变化（与我更改的行不同）：

select option on second row

如何使用选择选项自动填充同一行..？

这是我的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();}

2 个答案:

答案 0 :(得分：0)

你的第一个改变：

$('#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，那么你需要在第二个函数中使用那个。

答案 1 :(得分：0)

问题是，你没有在这里指定任何行号

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

这就是为什么它只改变了第一个元素，因为它不知道哪个＆＃34; spesifikasi＆＃34;要改变的输入。

<强>解  你应该有这样的东西

   <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负责您使用的每个行号，因此   您应该更改您用于在其ID中添加索引的每个输入   和名称与行号

相同

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

P.S：如果你还不清楚它们，请多询问一下

相关问题
最新问题