我不能将我的 foreach 选择选项放在 JS 中

Question

您好，谁能帮我把我的 foreach 结果放入我的 JS 添加行函数。

我正在使用 Codeigniter，它将数据从控制器传递到视图。

所以我在 VIEW 中有 SELECT，它将在我的 OPTIONS 中给出我的 foreach 详细信息的结果。

<td class="form-group">
    <select class="form-control" name="subparticulars[<?php echo $x; ?>]" id="subparticulars<?php echo $x; ?>">
        <option value="">Select Particulars</option>

        <?php foreach ($particularsData as $particulars)
        {
        ?>

        // FOR EACH RESULTS INSIDE THE OPTIONS
        <option value="<?php echo $particulars['feetype_id']; ?>"> <?php echo $particulars['feetype_name']; ?> </option>

        <?php 
        } 
        ?>
    </select>                     
</td>

所以模态表单 Select Option 将如下所示。

现在让我们转到我的 JS 中的 Add Row Function，如果您点击右上角的 Add Row Button，它将添加新的相同行。

function addPaymentRow()
{
var tableLength = $("#addSubPaymentTable tbody tr").length;

var tableRow;
var arrayNumber;
var count;

if(tableLength > 0) {       
    tableRow = $("#addSubPaymentTable tbody tr:last").attr('id');
    arrayNumber = $("#addSubPaymentTable tbody tr:last").attr('class');
    count = tableRow.substring(3);  
    count = Number(count) + 1;
    arrayNumber = Number(arrayNumber) + 1;                  
} else {
    // no table row
    count = 1;
    arrayNumber = 0;

}

// I NEED HELP HERE, I CAN ADD ROWS with no foreach value just plain input type, HOW CAN I ADD VALUES HERE FROM FOR EACH                  
var tr = '<tr id="row'+count+'" class="'+arrayNumber+' appended-exp-row">'+                                 
    '<td class="form-group">'+
        '<select class="form-control" name="subparticulars['+count+']" id="subparticulars'+count+'">'+
        '<option value="">Select Particulars</option>'+
        '</select>'+                        
    '</td>'+

    '<td class="form-group">'+
        '<input type="text" class="form-control" name="subpaymentbalance['+count+']" id="subpaymentbalance'+count+'"/>'+                        
    '</td>'+

    '<td class="form-group">'+          
        '<input type="text" class="form-control" name="subpaymentamount['+count+']" id="subpaymentamount'+count+'" onkeyup="calculateTotalAmount()" placeholder="Payment Amount" />'+                                   
    '</td>'+

    '<td class="form-group">'+
        '<button type="button" class="btn btn-danger btn-sm" onclick="removePaymentRow('+count+')">Remove</button>'+
    '</td>'+
'</tr>';

if(tableLength > 0) {                           
    $("#addSubPaymentTable tbody tr:last").after(tr);
} else {                
    $("#addSubPaymentTable tbody").append(tr);
}               
}

添加行的结果将如下所示。

有人可以帮我填充我的JS中的选项来自我的foreach，就像我的查看。

Answer 1

试试这个： $('.particulars option').clone() 将为您提供主选择的所有选项，然后您只需将其附加到新创建的选择中即可。

<td class="form-group">
<select class="form-control particulars" name="subparticulars[<?php echo $x; ?>]" id="subparticulars<?php echo $x; ?>">
    <option value="">Select Particulars</option>

    <?php foreach ($particularsData as $particulars)
    {
    ?>

    // FOR EACH RESULTS INSIDE THE OPTIONS
    <option value="<?php echo $particulars['feetype_id']; ?>"> <?php echo $particulars['feetype_name']; ?> </option>

    <?php 
    } 
    ?>
</select>                     

 function addPaymentRow()
    {
        var tableLength = $("#addSubPaymentTable tbody tr").length;

        var tableRow;
        var arrayNumber;
        var count;

        if (tableLength > 0) {
            tableRow = $("#addSubPaymentTable tbody tr:last").attr('id');
            arrayNumber = $("#addSubPaymentTable tbody tr:last").attr('class');
            count = tableRow.substring(3);
            count = Number(count) + 1;
            arrayNumber = Number(arrayNumber) + 1;
        } else {
            // no table row
            count = 1;
            arrayNumber = 0;

        }

// I NEED HELP HERE, I CAN ADD ROWS with no foreach value just plain input type, HOW CAN I ADD VALUES HERE FROM FOR EACH                  
        var tr = '<tr id="row' + count + '" class="' + arrayNumber + ' appended-exp-row">' +
                '<td class="form-group">' +
                '<select class="form-control" name="subparticulars[' + count + ']" id="subparticulars' + count + '"></select>' +
                '</td>' +
                '<td class="form-group">' +
                '<input type="text" class="form-control" name="subpaymentbalance[' + count + ']" id="subpaymentbalance' + count + '"/>' +
                '</td>' +
                '<td class="form-group">' +
                '<input type="text" class="form-control" name="subpaymentamount[' + count + ']" id="subpaymentamount' + count + '" onkeyup="calculateTotalAmount()" placeholder="Payment Amount" />' +
                '</td>' +
                '<td class="form-group">' +
                '<button type="button" class="btn btn-danger btn-sm" onclick="removePaymentRow(' + count + ')">Remove</button>' +
                '</td>' +
                '</tr>';

        if (tableLength > 0) {
            $("#addSubPaymentTable tbody tr:last").after(tr);
        } else {
            $("#addSubPaymentTable tbody").append(tr);
        }

        $('.particulars option').clone().appendTo('#subparticulars' + count);
    }