如何在asp.net c#中使用jquery datatable为每行添加一个下拉列表答案

【问题标题】：How to add a dropdown list to each rows with values using jquery datatable in asp.net c#如何在asp.net c#中使用jquery datatable为每行添加一个下拉列表
【发布时间】：2022-10-06 13:09:06
【问题描述】：

当我单击添加按钮时，我想将动态下拉列表添加到每一行，我在下面编写了代码来实现这一点，值即将到来，但不像下拉列表

示例代码是： -

 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);

 }

输出就像值一样，不像下拉列表这样：-

建议我在哪里做错了，我怎样才能做到这一点。

我对这个 jQuery 逻辑很陌生。

标签： javascript c# jquery asp.net

【解决方案1】：

尝试在trd += 中使用ddlInputParameters.outerHTML() 而不是ddlInputParameters.html()，如下所示。

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

Element DOM 接口的 outerHTML 属性获取描述元素及其后代的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

【讨论】：

嗨@Karan，感谢您的评论，我在我的代码中添加了这个ddlInputParameters.outerHTML()，总行正在跳过。（输出不来）。

【解决方案2】：

outerHTML 属性在我的场景中不起作用，我已经更改了如下现有逻辑，它对我来说很好用

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>";

我已将此ddlInputParameters 添加到<td>，就像trd += ddlInputParameters;

【讨论】：