javascript - 制作多行三个相关的保管箱

我构建了三个相关的保管箱：supplayer（供应商），kode_barang（项目ID）和nama_barang（变量）。用户可以选择一个供应商，然后选择该供应商提供的ItemID，然后从所需的ItemID中确定产品的哪个变体。我使用以下脚本：

window.load=$( document ).ready(function() {
    $.ajax({
        type:'POST',
        url:'supplayerAjaxData.php',
        success:function(html){
            $('#supplayer').html(html);
        }
    });
});


$( document ).ready(function() {
    $('#supplayer').on('change',function(){//change function on country to display all state
        var kode_supplayer = $('#supplayer').val();
        if(kode_supplayer){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'kode_supplayer='+kode_supplayer,
                success:function(html){
                    $('#kode_barang').html(html);
                    $('#nama_barang').html('<option value="">Select state first</option>');
                }
            });
        }else{
            $('#kode_barang').html('<option value="">Select country first</option>');
            $('#nama_barang').html('<option value="">Select state first</option>');
        }
    });

    $('#kode_barang').on('change',function(){//change state to display all city
        var kode_barang = $('#kode_barang').val();
        if(kode_barang){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'kode_barang='+kode_barang,
                success:function(html){
                    $('#nama_barang').html(html);
                }
            });
        }else{
            $('#nama_barang').html('<option value="">Select state first</option>');
        }
    });
});

然后我以这种方式显示它：

<table id="theTable" border="1">

<thead><br><br>
    <tr>
        <th> Supplayer </th>
        <th> Kode Barang </th>
        <th> Nama Barang </th>
        <th> Quantity </th>
    <tr>
</thead>

<tbody>
    <tr>
        <td>
            <select class="selectpicker form-control" name="supplayer[]" id="supplayer" autofocus="autofocus" required>
                <option value="">Select an Option</option>
            </select>
        </td>
        <td>
            <select class="selectpicker form-control" name="kode_barang[]" id="kode_barang"  autofocus="autofocus" required>
                <option value="">Select an Option</option>
            </select>
        </td>
        <td>
            <select class="selectpicker form-control" name="nama_barang[]" id="nama_barang" standard title="Select an Option" autofocus="autofocus" required>
                <option value="">Select an Option</option>
            </select>
        </td>
        <td><input class="valOne" type="text" name='qty[]'></td>
    </tr>

在此之前，一切都可以正常运行。然后，我通过将第一行从<tr>复制到</tr>来制作第二行，但是它不起作用。第二行中的选定值显示在第一行中。您能帮我解决这个问题吗？谢谢。

最佳答案

如果您要手动添加行，则应提供不同的ID，并且您必须分别侦听它们，但是我不会这样做。

我宁愿将onchange属性添加到select，分配一个函数，然后执行工作

HTML：

<select onchange="supplierChanged(this)">
    <option>Option 1</option>
</select>

JS：

function supplierChanged(elem) {
    var selectValue = $(elem).val();
    // Rest of your code
}

更新1

$('.supplayer').on('change',function(){
  //change function on country to display all state
  // change 'id' - supplayer to 'class' - supplayer
        var self = this; // maintaining reference of 'this' so as to use in other functions
        var kode_supplayer = $(self).val();

        // Not sure about these two below (not tested), you need to test them
        var kode_barang = $(self).closest(".kode_barang")[0];
        var nama_barang = $(self).closest(".nama_barang")[0];

        if(kode_supplayer){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'kode_supplayer='+kode_supplayer,
                success:function(html){
                    $(kode_barang).html(html);
                    $(nama_barang).html('<option value="">Select state first</option>');
                }
            });
        }else{
            $(kode_barang).html('<option value="">Select country first</option>');
            $(nama_barang).html('<option value="">Select state first</option>');
        }
    });

关于javascript - 制作多行三个相关的保管箱，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47279325/