如何获取含下拉框的jQuery DataTable所有行的全部列值

我有一个jQuery DataTable，共5列，其中第5列是下拉框，默认显示“None”，每个下拉项包含value（ID）和文本值。表格通过DataSet填充，下拉框选项通过ViewBag传递。现在需要实现保存功能，遍历所有行的所有列数据，包括下拉框选中的ID和文本，但当前的Save函数无法实现需求。

现有代码如下：

.cshtml代码 #

<tbody>
  @foreach (System.Data.DataRow row in DataSet.Tables[0].Rows)
  {
  <tr>
    @foreach (System.Data.DataColumn column in DataSet.Tables[0].Columns)
      {
          <td>@row[column]</td>
      }
  <td>
  <div class="ddlPanel">
  <select id="ddlSettingName" name="settingNameList" class="form-control select2">
      <option value="0">None</option>
             @foreach (var item in ViewBag.DropdownOptions) // viewbag is dataset
                {
                  <option value="@item.Value">@item.Text</option>
                }
   </select>                                        
   </div>
  </td>
 </tr>
 }
</tbody>

JS代码 #

<script type="text/javascript">
  function Save() {
       var newDoorListForAdd = new Array();
       var table = document.getElementById("newTable");
       var tableLength = table.rows.length;
       for (var i = 0; i < tableLength - 1; i++) {            
            var trial = $("#ddlSettingName option:selected").text();
            alert(trial);
       }
    }
</script>

请问如何实现获取所有行的全部列值（包括下拉框选中的ID和文本）？

1. 修复下拉框ID重复问题 #

当前循环生成的所有下拉框都使用了同一个id="ddlSettingName"，这会导致JS只能定位到第一个下拉框，无法获取每行的选中值。解决方法：

• 移除重复的固定ID，给所有下拉框添加统一类名（比如setting-ddl）
• 或者给每个下拉框生成唯一ID（比如结合行的主键，格式为id="ddlSettingName_@row["主键列名"]"）

修改后的.cshtml下拉框部分：

<select name="settingNameList" class="form-control select2 setting-ddl">
    <option value="0">None</option>
    @foreach (var item in ViewBag.DropdownOptions)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

2. 重写Save函数，正确遍历每行数据 #

遍历表格的每一行，分别获取普通列的文本值，以及该行下拉框的选中ID和文本，最后整理成数组保存。

修改后的JS代码：

function Save() {
    var newDoorListForAdd = [];
    // 遍历表格的每一行
    $("#newTable tbody tr").each(function() {
        var rowData = {};
        var $row = $(this);
        
        // 获取前4列的文本值（对应DataSet的列）
        $row.find("td:not(:last)").each(function(index) {
            // 可根据实际需求自定义键名，这里用索引区分列
            rowData["column" + (index+1)] = $(this).text().trim();
        });
        
        // 获取当前行下拉框的选中ID和文本
        var $select = $row.find(".setting-ddl");
        rowData["settingId"] = $select.val();
        rowData["settingText"] = $select.find("option:selected").text().trim();
        
        // 将该行数据存入数组
        newDoorListForAdd.push(rowData);
    });
    
    // 后续可根据需求处理数据，比如打印日志或提交后端
    console.log(newDoorListForAdd);
    // 示例：AJAX提交到后端接口
    // $.post("/你的保存接口地址", { data: newDoorListForAdd }, function(response) { ... });
}

代码说明 #

• 使用$("#newTable tbody tr").each()遍历行，比原生JS更简洁，且兼容DataTable动态行场景
• 用td:not(:last)筛选出非下拉框的列，逐个提取文本值
• 通过.setting-ddl类定位当前行的下拉框，用val()获取选中ID，option:selected获取选中文本
• 每行数据整理为对象存入数组，方便后续批量处理或提交

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