How to add a dropdown list to each rows with values using jquery datatable in asp.net c#

Question

I want to add the dynamic dropdown list to each row when I click the add button and I have written this below code to achieve this and values are coming but not like dropdown list

example code is :-

var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>");
$.each(data.d, function (key, value) {

if (value.Type == "inputparameters") {

                    //var option = $("<option />");  
                    var option = $("<option></option>");  
                    option.html(value.TypeData);  
                    option.val(key);  
                    ddlInputParameters.append(option);  

                }  

});

//Initially When the page is loaded I'm checking the length and adding the records to jquery table
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {

var trd = "";
trd += "<tr>";
//trd += "<td hidden='hidden'><button class = 'btn btn-danger btn-sm'> delete </button></td>";
trd += "<td>";
//trd += "<select class='input-small' id='ddltype'><option value='1'>Pts</option><option value='2'>%</option></select>";
trd += ddlInputParameters.html(); //Here I want to add(bind)that dropdown list
trd += "</td>";
trd += "<td>";
trd += "<select class='input-small' id='ddlexit'><option value='1'>None</option><option value='2'>Sq Off Leg</option><option value='3'>Sq Off Strategy</option><option value='4'>Partial Exit</option></select>";
trd += "</td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "<td><input type='text'> </td>";
trd += "</tr>";
$("#EntryParametersTableRightDataID tbody").append(trd);

}

Output is coming like values not like dropdown list this :-

]1

Suggest me where I did the mistake and how can I achieve this.

I'm very new to this jQuery logics.

Note :- I have tried outerHTML() this method also but not working will.

Answer 1

Try another instruction:

 trd += ddlInputParameters.prop( 'outerHTML' );

Answer 2

The outerHTML attribute is not worked in my scenario and I have changed the existing logic like below and it's work well to me

var optionsdata = '';

$.each(data.d, function (key, value) {

if (value.Type == "inputparameters") {

 optionsdata += "<option value="+key+">"+value.TypeData+"</option>";  

});

var ddlType = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";

And I have added this ddlType to <td> like this trd += ddlType;