how to append value in select tag inside dynamic table

Question

im adding table row data using json response. here is my code

var i;
for (i = 0; i < result.length; i++) {

    $.get('LoadserviceSplit', {
        "sectcode" : result[i]
    },
        function (jsonResponse) {
        if (jsonResponse != null) {
            var table2 = $("#table_assign");
            $.each(jsonResponse, function (key, value) {
                var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                rowNew.children().eq(0).text(value['serviceId']);
                rowNew.children().eq(1).text(value['title']);
                rowNew.children().eq(2).html('<input type="text" id="date_set" name="date_set"/>');
                rowNew.children().eq(3).html('<input type="text" id="date_set1" name="date_set1"/>');
                rowNew.children().eq(4).html('<input type="text" id="date_set2" name="date_set2"/>');
                rowNew.children().eq(5).html('<select class="status1" id="status1">');

                rowNew.appendTo(table2);

            });
        }
    });

    var pass_unit_code = "001";
    $.get('LoadDivisionCodeServlet', { //call LoadDivisionCodeServlet controller
        unitCode : pass_unit_code //pass the value of "sample" to unitCode:
    }, function (jsonResponse) { //json response
        var select = $('#status1'); //select #status1 option
        select.find('option').remove(); //remoev all item in #divcode option
        $.each(jsonResponse, function (index, value) {
            $('<option>').val(value).text(value).appendTo(select); //response from JSON in array value{column:value,column:value,column:value}
        });
    });

}

it works fine except the select tag part. only the first row of table have value. the rest has no value. i want all drop-down list inside the table has same value.. can anyone help me about this.

Answer 1

Take a look at

rowNew.children().eq(5).html('<select class="status1" id="status1">');

You're creating new select elements in a $.each and assigning the same id, that is status1 to all of them.

Then you're selecting the select element that has an id of status1 like

var select = $('#status1'); //select #status1 option

Therefore, only the first select element will be selected.

EDIT:

Your question is not completely clear.

However, this is how you can add different Id for select inside each of your <td>

Replace this

rowNew.children().eq(5).html('<select class="status1" id="status1">');

With something like

rowNew.children().eq(5).html('<select class="status1" id="status'+key+'">');

So this will have different Ids.