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

Posted 2023-05-09

【中文标题】下拉框更改时提交表单 - 不做任何事情

【英文标题】：Submit form when dropdownbox changes - not doing anything

【发布时间】：2018-03-14 13:16:16

【问题描述】：

我创建了一个视图，其中包含一个 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 中，以防它产生任何影响，但它没有。

如有任何帮助，我们将不胜感激。

【问题讨论】：

当您在select 上触发change 事件时，您是否检查过控制台是否有错误？

您不应该在<select> 的.change() 事件上提交表单，如果用户使用箭头键导航选项，它将立即提交。 （请注意，您不需要 new @id = "HideDone" - id 属性已由 DropDownList() 方法添加）

控制台没有显示任何错误。

我添加了 id 以确保它存在！

您的change 下拉事件是否被调用？

【参考方案1】：

我发现了问题：

由于脚本在视图中并且 JQuery 包被加载到 _layout 文件中，所以 JQuery 包是在上面的脚本之后加载的，这意味着它不会工作。

我需要移动 JQuery 包以在 _Layout 文件中更早地加载，以便它出现在上面的脚本之前。

【参考方案2】：

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

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

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。一个正确的解释would greatly improve 它的长期价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有其他类似问题的读者更有用。请edit您的回答添加一些解释，包括您所做的假设。