Question

我创建了一个视图，其中包含一个DropDownList来显示或隐藏一组记录。当我手动单击提交按钮时，表单工作正常但当我添加jQuery以在DropDownList的值更改时自动提交表单时，它不会执行任何操作。

@using (Html.BeginForm("Index", "Features", FormMethod.Get, new { @id = "filterForm" }))
{
  <label>Hide done:&nbsp;</label>
  @Html.DropDownList("HideDone", new List<SelectListItem>
  {
    new SelectListItem { Text = "No", Value = "No" },
    new SelectListItem { Text = "Yes", Value = "Yes" }
  }, new { @id = "HideDone" })
  <input type="submit" value="Filter" />
}

$(document).ready(function () {
  $('#HideDone').on('change', function () {
    $('#filterForm').submit();
  });
});

如果我查看网页的来源，则表单的ID为filterForm，而DropDownLost的ID为HideDone。

我尝试在Using {}内部移动脚本，以防它有任何区别，但事实并非如此。

感谢任何帮助。

Answer 1

我发现了问题：

由于脚本位于View中，并且JQuery包已加载到_layout文件中，因此在上面的脚本之后加载了JQuery包，这意味着它无法正常工作。

我需要移动JQuery包以便在_Layout文件中加载，以便它显示在上面的脚本之前。

Answer 2

or 
$("body").on("change", "#HideDone", function (e) {
 $('#filterForm').submit();
});

事件处理程序仅绑定到当前选定的元素;它们必须在您的代码调用.on（）时存在。但另一方面，委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。基本上这意味着只有容器被给予指令;它负责代表其子元素通知事件。为了确保存在，我使用了一般容器“body”。

下拉框更改时提交表单 - 没有做任何事情

2 个答案: