我不能把我的foreach Select Option放在JS中

时间:2017-05-09 17:50:15

标签: javascript php jquery codeigniter foreach

嗨,有人可以帮助我将 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>

因此,模态表单选择选项将如下所示。 enter image description here

现在让我们转到 JS 中的添加行功能,如果点击右上角的添加行按钮,它会添加新的相同行。

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

添加的行结果将如下所示。enter image description here

有人可以帮助我填充 JS 来自 JS 来自 foreach ,就像我的 VIEW

1 个答案:

答案 0 :(得分: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);
    }