如何获取表格单元格内的选择下拉列表的值

Question

我有一个表（使用 dataTables 插件）。有一列在每一行中有一个下拉select 元素，有几个options。在另一个单元格中，有一个submit 按钮（在每一行中）。它由单元格中的 <a href /> 标记表示，尽管实际提交是通过使用 POST 而不是默认 GET 的 href 的 AJAX 调用进行的。

当单击该行的提交按钮时，我正在尝试检索下拉列表中所选项目的值。但是，在我的 java 控制台中，它只返回 [object Object]。

值得注意的是，我正在尝试解决每个选择下拉列表具有相同 ID 的事实。

这是下拉选择行的代码：

<form:select path="adminReviewsLetterStatus.id" id="statusID"><form:option value="">' + full.statusDescriptionState + '</form:option>

<form:options items="${statusList}" itemLabel="statusDescription" itemValue="id"/></form:select>

然后，我尝试使用以下 javascript 获取该下拉列表的值：

var dropDownValue = $(this).prev($("#statusID").find('option:selected').val());

（提交按钮位于带有下拉选择的单元格之后的单元格中）。

对于提交按钮，我使用以下内容：

<a href="addLetterToRev.htm?letRevTypYrID=' + full.reviewTypeID + '&letterId=' + full.id + '&statusIdParameter=' + dropDownValue + '" title="Add">Add</a>

（statusIdParameter 是我在控制器中抓取的参数）。

当我打印到我的 java 控制台时，我得到了 letRevTypYrID 和 letterId 参数的预期值，但我的 statusIdParameter 参数返回 [object Object]。

我觉得我快要让这件事发挥作用了，因此非常感谢任何建议。

AJAX 调用非常简单：

$.ajax({
        url: $(this).attr('href'),
        method: 'POST'
});

    return false;

Answer 1

问题是这一行：

var dropDownValue = $(this).prev($("#statusID").find('option:selected').val());

$.prev() 返回一个 DOM 元素，即您得到的 object。如您所见，您的 var 中充满了来自 $.prev() 的任何内容。

改为这样做：

var dropDownValue = $(this).prev(),find("#statusID").val();

$.prev() 应该根据您的问题获得带有下拉菜单的单元格。 Find 将获得下拉菜单，然后$.val() 作用于select 元素，该元素填充了选定的选项（所以不要在option 元素上使用$.val()。

另外，您应该在 ajax 语句中填写 url，而不是在您的 <a /> 中使用 href 属性，当您回顾代码时，它会给您造成混乱（即使它工作正常)。