MVC Grid/WebGrid下拉框选中值异常问题求助

你遇到的这个问题核心原因很明确：DOM中元素的ID必须是唯一的，但你的WebGrid每行都生成了ID为ddlmonth的下拉框。当你用$("#ddlmonth").val()获取值时，jQuery只会匹配页面中第一个带有该ID的元素，这就是为什么选择第二行下拉框时，始终返回第一行值的原因。

下面是具体的解决方案，分两步修改：

1. 修改WebGrid下拉框的生成逻辑 #

放弃给所有下拉框设置相同的ID，改用类名来标识，同时可以给每个下拉框绑定行的唯一标识（比如数据主键），方便后续操作：

假设你原来的下拉框代码是这样的：

@Html.DropDownList("ddlmonth", ViewBag.MonthList as SelectList, "--选择月份--", new { id = "ddlmonth" })

修改为：

// 用类名ddlmonth替代重复ID，同时通过data属性存储行的主键ID
@Html.DropDownList($"ddlmonth_{item.Id}", ViewBag.MonthList as SelectList, "--选择月份--", new { @class = "ddlmonth", data_rowid = item.Id })

这里item.Id是你WebGrid每行数据的主键，确保每个下拉框的ID唯一，类名ddlmonth用来统一绑定事件。

2. 修改JavaScript事件处理逻辑 #

不要固定通过ID获取下拉框值，而是获取当前触发事件的下拉框实例，这样就能准确拿到当前行的选中值。

方法一：使用事件委托（推荐，适配动态生成的行） #

如果你的WebGrid是动态加载（比如分页、刷新后重新渲染），用事件委托可以确保事件始终生效：

// 监听所有类名为ddlmonth的下拉框的change事件
$(document).on('change', '.ddlmonth', function() {
    // 获取当前选中的下拉框的值
    var selectedMonth = $(this).val();
    // 获取当前行的主键ID（可选，根据你的业务需求使用）
    var currentRowId = $(this).data('rowid');
    
    // 这里写你原来fillAmount函数里的业务逻辑，比如提交数据或更新页面
    console.log("当前行选中月份：" + selectedMonth + "，行ID：" + currentRowId);
});

方法二：通过onchange传递当前元素 #

如果你习惯用内联事件绑定，可以修改下拉框的onchange属性，把当前元素传入函数：

// 修改下拉框的onchange属性，传入this
@Html.DropDownList($"ddlmonth_{item.Id}", ViewBag.MonthList as SelectList, "--选择月份--", new { @class = "ddlmonth", onchange = "fillAmount(this)" })

然后修改fillAmount函数：

function fillAmount(currentDdl) {
    // 获取当前触发事件的下拉框的值
    var selectedMonth = $(currentDdl).val();
    // 后续业务逻辑...
}

额外提醒：表单提交的name属性 #

如果你的需求是提交表单时获取所有行的下拉框值，要确保每个下拉框的name属性设置合理。比如可以用数组格式：

@Html.DropDownList($"ddlmonth[{item.Id}]", ViewBag.MonthList as SelectList, "--选择月份--", new { @class = "ddlmonth" })

这样后台Action可以通过Dictionary<int, string>或者对应的模型来接收每行的选中值。

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