选择一个选项，在动态创建的表行中加载另一个选择选项

Question

这是我在html和jquery中创建动态行的代码

<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'>

            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>

                        <th width="14%">Item No</th>
                        <th width="14%">Item Name</th>
                        <th width="14%">Category</th>
                        <th width="14%">Price</th>
                        <th width="14%">Quantity</th>
                        <th width="14%">Type</th>
                        <th width="14%">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input class="case" type="checkbox"/></td>

                        <td><input type="text" data-type="product_code" name="productcode[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off" required></td>
                        <td><input type="text" data-type="product_name" name="productname[]" id="itemName_1" class="form-control autocomplete_txt" autocomplete="off" required></td>
                        <td><select name="category[]" class="form-control txt" id="category_1"></select></td>
                        <td><input type="number" name="price[]" id="price_1" class="form-control changesNo" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required></td>
                        <td><input type="number" name="quantity[]" id="quantity_1" class="form-control changesNo" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required></td>



                        <td><select class="form-control" name="prdtype[]">
                        <option value="Prepaid">Prepaid</option>
                        <option value="Postpaid">Postpaid</option>
                       </select></td>



                        <td><input type="number" name="total[]" id="total_1" class="form-control totalLinePrice" autocomplete="off" onKeyPress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly></td>
                    </tr>
                </tbody>
            </table>

                        </div>
<div class='col-xs-12 col-sm-3 col-md-3 col-lg-3'>
            <button class="btn btn-default delete" type="button"><b>- Delete</b></button>
            <button class="btn btn-default addmore" type="button"><b>+ Add New</b></button>
        </div>

我点击添加新按钮使用此代码创建另一行

    var i=$('table tr').length;
var clicks = 1; $(".addmore").click(function(){ clicks++;});
$(".addmore").on('click',function(){
    html = '<tr>';
    html += '<td><input class="case" type="checkbox"/></td>';
    html += '<td><input type="text" data-type="product_code" name="productcode[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off" required></td>';
    html += '<td><input type="text" data-type="product_name" name="productname[]" id="itemName_'+i+'" class="form-control autocomplete_txt" autocomplete="off" required></td>';
    html += '<td><select name="category[]" class="form-control txt" id="category_'+clicks+'"></select></td>';
    html += '<td><input type="text" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required></td>';
    html += '<td><input type="text" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" required></td>';
    html += '<td><select class="form-control" name="prdtype[]"><option value="Prepaid">Prepaid</option><option value="Postpaid">Postpaid</option></select></td>';
    html += '<td><input type="text" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;" readonly></td>';
    html += '</tr>';
    $('table').append(html);
    i++;
});

//to check all checkboxes
$(document).on('change','#check_all',function(){
    $('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});

//deletes the selected table rows
$(".delete").on('click', function() {
    $('.case:checkbox:checked').parents("tr").remove();
    $('#check_all').prop("checked", false); 
    calculateTotal();
});

自动完成字段为Itom No，此处的项目名称为自动完成的代码

    //autocomplete script
$(document).on('focus','.autocomplete_txt',function(){
    type = $(this).data('type');

    if(type =='product_code' )autoTypeNo=0;
    if(type =='product_name' )autoTypeNo=1;     

    $(this).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url : 'ajax.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $.map( data, function( item ) {
                        var code = item.split("|");
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,            
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itemName_'+id[1]).val(names[1]);
            $('#quantity_'+id[1]).val(1);
            $('#price_'+id[1]).val(0);
            $('#total_'+id[1]).val( 1*0 );
            getcategory(names[2])
            calculateTotal();

        }               
    });
});

在ajax.php页面

 <?php
require_once '../model/config.php';
if(!empty($_POST['type'])){
    $type = $_POST['type'];
    $name = $_POST['name_startsWith'];
    $query = "SELECT id,product_code,product_name FROM products where UPPER($type) LIKE '".strtoupper($name)."%'";
    $result = mysqli_query($con, $query);
    $data = array();
    while ($row = mysqli_fetch_assoc($result)) {
        $name = $row['product_code'].'|'.$row['product_name'].'|'.$row['id'];
        array_push($data, $name);
    }   
    echo json_encode($data);exit;
}






if(isset($_POST['cat']) && $_POST['cat'] == 'category' ){
    $id = $_POST['id'];
    $query = "SELECT * FROM product_category WHERE product_id =$id";
    $result = mysqli_query($con, $query);
    $category = '';
    while($data = mysqli_fetch_assoc($result))
    {
    if(!empty( $data )){
        echo "<option>".$data['category']."</option>";
    }
    }
    mysqli_close($con);

    exit;
}
?>

当我在类别字段中选择一个项目否项目名称及其对应的类别显示时，我使用此代码选择类别

function getcategory(id){

         $.ajax({
             url: "ajax.php",
             method: 'post', 
             data:{id:id, cat:'category'},
             success: function(result){
                $("#category_'+clicks+'").html(result);

            }
        });
    }

但我的类别未显示在类别字段

中

如何解决这个问题