How to populate data in dynamically created selectbox in a table row using jquery

Question

I have one service which gives me lots of Data from back-end. I have to show that in a table using jquery. I shows every data but unable to show the materialDetails in a selectbox. Could anyone help me on this ?

 $.each(response.data[0].listRawItemDetails, function (i) {
                            $("#received_item > tbody").append("<tr>" +
                                                        "<td>" + '<input type="hidden" name="fabricId'+i+'" value="'+response.data[0].listRawItemDetails[i].fabricId+'">'+ response.data[0].listRawItemDetails[i].fabriceCode + "</td>" +
                                                        "<td>" + '<input type="hidden" name="measurementRange'+i+'" value="'+response.data[0].listRawItemDetails[i].measurementRange+'">'+ response.data[0].listRawItemDetails[i].measurementRange + ' ' +response.data[0].listRawItemDetails[i].measurementType+ "</td>" +
                                                        "<td>" + '<input type="text" name="rate_'+i+'" id="rate_'+i+'" class="form-control rateCheck" value="" placeholder="Per '+response.data[0].listRawItemDetails[i].measurementType+'" style="width: 100px;" required="required">'+"</td>" +
                                                        "<td>" + '<span class="totalAmt'+i+'"></span>' + "</td>" +
                                                        **"<td>" + '<select class="form-control" id="materialDetails'+i+'"><option value="">-Select-</option></select>' + "</td>" +**
                                                    "</tr>");
                    }) //foreach

From response.data[0].listRawItemDetails[i].meterials I'm getting list of materials, I need to show that data, in last table data as a selectbox for each row.

Please explain your problem more briefly and post your all code that you have done yet. — Ahmed Ali
– Ahmed Ali, Commented Nov 8, 2019 at 6:08
I want to show the details coming from response.data[0].meterials (It's a List) inside #materialDetails select box — Trilõçhãñ Pãñdã
– Trilõçhãñ Pãñdã, Commented Nov 8, 2019 at 6:15
response.data[0].listRawItemDetails and response.data[0].meterials are not same. — Mamun
– Mamun, Commented Nov 8, 2019 at 6:18
That is what I am trying to say, meterials has the data but you are using listRawItemDetails in the code! — Mamun
– Mamun, Commented Nov 8, 2019 at 6:22

Trilõçhãñ Pãñdã · Accepted Answer · 2019-11-08 07:07:33Z

1

I added these lines of code it works for me..

$.each(response.data[0].listRawItemDetails, function (i) {
                        $.each(response.data[0].listRawItemDetails[0].meterials, function(index, value) {
                            $('#materialDetails'+i).append('<option value="' + value+ '">' + value+ '</option>');
                        });
                    }); //foreach

answered Nov 8, 2019 at 7:07

Trilõçhãñ Pãñdã

177 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to populate data in dynamically created selectbox in a table row using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related