use jQuery.Append() to add Select option from mysql using php

Viewed 16

Please help me because I am tired to find my error of (Why select option don`t retrieve data when append while retrieve without append()? but Option Appended have no data. thank you for you for help. I have the below table

 <table class="table table-hover table-white" id="tableEstimate">
                                    <thead class="text-center bg-primary text-light">
                                        <tr>
                                            <th style="width: 20px">sr</th>
                                            <th style="width: 300px">Material</th>
                                            <th style="width: 150px">Unit Price</th>
                                            <th style="width: 150px">Qty</th>
                                            <th style="width: 200px">Amount</th>
                                            <th>Add&Del </th>
                                        </tr>
                                            <script>var account = 1</script>
                                        <input type="text" value="1" class="form-control" id="count" name="co">
                                    </thead>
                                    <tbody>
                                    <tr id="addtr">
                                        <td><input type="text" value="1" name="sr[]" id="serail" style="width:30px ; text-align:center" readonly></td>
                                        <td id="addtd"><select name="Itemname[]" type="text" class="form-control" style="text-align:center;width:300px" id="item">
                                            <option value="">Choose Material</option>
                                            <?php include('../../../db/conn.php');
                                                $query=mysqli_query($conn,"select MaterialName from btbmaterial");
                                                foreach($query as $row){echo '<option value = "'.$row["MaterialName"].'">
                                                '.$row["MaterialName"]. '</option>';}?>
                                            </select>
                                        </td>
                                        <td><input class="form-control text-center unit_price" style="width:150px" type="text" id="unit_cost" name="unit_cost[]" value=""></td>
                                        <td><input class="form-control text-center qty" style="width:150px" type="text" id="qty" name="qty[]"></td>
                                        <td><input class="form-control text-center total" style="width:200px" type="text" id="amount" name="amount[]" value="0" readonly></td>
                                        <td><a href="javascript:void(0)" class="text-success font-18" title="Add" id="addBtn"><i class="fa fa-plus"></i></a></td>
                                    </tr>
                                    </tbody>
                                </table>

to add a rows Use JQuery append() method like below

 var newtr = '<tr id="R${++rowIdx}"><td><input type="text" value="${rowIdx}" name="sr[]" id="serail" style="width:30px ; text-align:center" readonly></td><td><select name="Itemname[]" type="text" class="form-control" style="text-align:center"><option value="">Choose Material</option><option value="">M1</option>'+
        "<?php include('../../../db/conn.php');$query=mysqli_query($conn,'select MaterialName from btbmaterial');foreach($query as $row){echo '<option value = '.$row['MaterialName'].'>.$row['MaterialName'].' </option>'};?>"+
        '</select></td><td><input class="form-control text-center unit_price" style="width:150px" type="text" id="unit_cost" name="unit_cost[]"></td><td><input class="form-control text-center qty" style="width:150px" type="text" id="qty" name="qty[]"></td><td><input class="form-control text-center total" style="width:200px" type="text" id="amount" name="amount[]" value="0" readonly></td><td><a href="javascript:void(0)" class="text-danger font-18 remove" id="rem" title="Remove"><i class="fa fa-trash-o"></i></a></td></tr>';

            $("#tableEstimate tbody").append(newtr);
0 Answers
Related