无法使用jQuery在HTML表中添加选择元素

Question

I was populating my tabular data from server through ajax using json . I want to create my HTML table row dynamically using jquery and every row must contain html elements like input type='text' and select dropdowns. I was able to create textboxes in columns, but I was not able create select dropdowns in columns. Here is my js code:

function loadFunction(){
    $.ajax({
        type : "GET",
        url  : "s3.do",
        data : "",
        success : function(data){
            alert("success");
            for(var i=0;i<data.length;i++){
            var ispSelect = $("<select></select>");
            var idProofSelect = $("<select></select>");
            var dataArr = data[i];
            var id = dataArr.id;
            var name = dataArr.name;
            var address = dataArr.address;
            var isp = dataArr.lsIsp;
            var idproof = dataArr.lsIdProof;
            $.each(isp,function(index,product){
                $("<option>").val(product.id).text(product.name).appendTo(ispSelect);
            });
            $.each(idproof,function(index,product){
                $("<option>").val(product.id).text(product.name).appendTo(idProofSelect);
            });
            $("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td>"+ispSelect+"</td>"
                    +"<td>"+idProofSelect+"</td>"
                    +"</tr>");
            }
        },
        error   : function(XMLHttpRequest,textStatus,errorThrown){
            alert("error");
        }
    });
}

the above code created below HTML table structure where under ISP and ID-Proof columns I am getting [Object Object], whereas I expected it to create <select> options for me. How can I resolve this issue. I am not that fluent with Jquery concepts. Is it the right way of what I am trying to do.

Answer 1

You add jQuery object to string - this wrong. Try:

$("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td>"+ispSelect[0].outerHTML+"</td>"
                    +"<td>"+idProofSelect[0].outerHTML+"</td>"
                    +"</tr>");
            }

Answer 2

When you do "some string" + Object - Object is being converted to String, that's why you get [object Object]

You need to add ids to each <td> , and then append the select boxes:

$("#tab tr:last").after("<tr><td><input type='checkbox' value='"+id+"'/></td><td><input type='text' value='"+name+"'/></td>"
                    +"<td><input type='text' value='"+address+"' /></td>"
                    +"<td id='ispSelect_'" + i + "></td>"
                    +"<td id='idProofSelect_'" + i + "></td>"
                    +"</tr>");
 $("#ispSelect_" + i).append(ispSelect);
 $("#idProofSelect_" + i).append(idProofSelect);