ASP.NET C#中jQuery DataTable行添加下拉列表异常排查与解决

我点击添加按钮时，想给jQuery DataTable的每行添加动态下拉列表，编写了如下代码，但页面仅显示选项值，看不到下拉框：

var ddlInputParameters = $("<select class='input-small' id='ddltype'></select>"); 
$.each(data.d, function (key, value) {
    if (value.Type == "inputparameters") {
        var option = $("<option></option>");
        option.html(value.TypeData);
        option.val(key);
        ddlInputParameters.append(option);
    }
});

// 页面加载时检查长度并添加表格行
if ($("#EntryParametersTableDataID,#EntryParametersTableRightDataID tbody").children().children().length == 1) {
    var trd = "";
    trd += "<tr>";
    trd += "<td>";
    trd += ddlInputParameters.html(); // 这里想绑定下拉列表，但只显示选项值
    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);
}

错误原因 #

核心问题是你使用了ddlInputParameters.html()方法——这个方法只会返回<select>标签内部的HTML内容（也就是你添加的<option>标签），不会包含外层的<select>容器本身，所以最终拼出来的HTML里只有一堆孤立的<option>，浏览器无法识别为下拉框，只会显示纯文本。

正确实现方法 #

方法一：获取完整的select元素HTML #

改用prop('outerHTML')方法获取包含<select>标签在内的完整HTML代码：

trd += ddlInputParameters.prop('outerHTML'); // 替换原有的ddlInputParameters.html()

方法二：直接拼接字符串（更简洁） #

不需要创建jQuery对象，直接拼接<select>和<option>的字符串：

// 初始化select的基础字符串
var ddlHtml = '<select class="input-small" id="ddltype">';
$.each(data.d, function (key, value) {
    if (value.Type == "inputparameters") {
        // 直接拼接每个option
        ddlHtml += `<option value="${key}">${value.TypeData}</option>`;
    }
});
ddlHtml += '</select>';

// 拼接表格行时直接使用ddlHtml
trd += ddlHtml;

额外注意事项 #

如果多次添加行，每个下拉框的id="ddltype"会导致DOM中id重复，建议：

• 去掉id，改用class（比如class="input-small ddltype"）来操作元素
• 给id加动态后缀（比如id="ddltype-${rowIndex}"），避免重复

内容的提问来源于stack exchange，提问作者ashok