Question

我构建了三个依赖的dropbox：supplayer（supplier），kode_barang（ItemID）和nama_barang（variant）。用户可以选择供应商，然后选择该供应商提供的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>来制作第二行，但它不起作用。第二行中的选定值显示在第一行中。你能帮我解决这个问题吗？谢谢。

Answer 1

如果你手动添加行，那么提供不同的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>'); 
        }
    });

制作多行三个相关的Dropbox

1 个答案: