我无法将foreach选择选项放在JS中

Question

Hi can someone help me put my foreach result in my JS add row function .

I'm Using Codeigniter that will pass the data from controller to view.

So I have SELECT in VIEW that will give results of my foreach particulars in my OPTIONS .

<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>

So the the Modal Form Select Option will look like this.

Now let's move to my Add Row Function in my JS where if you click Add Row Button on the top right side it will add new identical rows.

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);
}               
}

The result of added row will look like this.

Can someone help me populate my options in my JS coming from my foreach like in my VIEW .

Answer 1

Try this: $('.particulars option').clone() will give you all the options of your main select then you just need to append that to your newly created select.

<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);
    }