Question 36453 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

Coming like a values

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

I’m very new to this jQuery logics.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 ddlInputParameters = "<select class='input-small' id='ddltypeauto'>" + optionsdata + "</select>";

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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search