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

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 :-

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

I'm very new to this jQuery logics.

CodePudding user response：

Try using ddlInputParameters.outerHTML() instead of ddlInputParameters.html() in trd = like below.

trd  = ddlInputParameters.outerHTML(); //Here I want to add(bind)that dropdown list

The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.

CodePudding user response：

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;