OnChange 事件在下拉/选择输入中过早触发？答案

【问题标题】：OnChange event fires too soon in dropdown / select input?OnChange 事件在下拉/选择输入中过早触发？
【发布时间】：2012-04-15 16:07:26
【问题描述】：

把这个问题放在这里我都觉得很愚蠢，但我还没有找到解决办法。

也许这就是 onchange 事件的工作方式，但它似乎触发得太早了（或者在做出最终选择时它应该再次触发）。我有一个选择/下拉菜单，用于刷新部分屏幕，但我发现在 Chrome 和 IE9 中，只要用户开始 typing 就会调用 onchange 事件（适用于鼠标选择） - 我认为这是有道理的，因为即使他们没有完成输入，也会做出新的选择。无论如何，屏幕会更新，但不会更新下拉列表中用户最终选择的数据（就像它在第一次点击/更改时触发，但当用户停止输入并进行最终选择时它不会再次触发） .

我已将其切换为 onblur，但在用户完成选择并继续之前它不会被触发，所以我很想找到一个比 onblur 更早触发的解决方案，但在用户做出最终选择之后.

这是在 MVC 项目中的 aspx 页面上：

<asp:DropDownList ID="employeeDropdown" runat="server" onchange="RefreshCalendarData()" />

这是它调用的js函数：

function RefreshCalendarData() {
    // code omitted
    Scheduler.Refresh();
}

有没有使用 js 或 jQuery 的好的解决方案/变通方法？

【问题讨论】：

ASP.NET 不使用 jQuery吗？另外，我没有看到这个问题（至少在 Chrome 中），change 事件不会为用户的最终下拉选择触发：jsfiddle.net/mattball/Mx7TN
@MДΓΓБДLL - 我也用 jquery 试过这个。我仍然遇到了这个问题。您似乎是正确的，因为我无法用您的示例重复该问题，但我的列表包含大约 150 项 - 但我同意，这无关紧要，而且一旦做出最终选择，它似乎应该触发 - 也许它是第二次触发，但我的刷新过程需要足够长的时间以至于它不会再次被调用（或者它仍在执行所以调用被忽略）？感谢您的帮助。
可能最好的方法是不要对选择菜单使用onchange，并在选择旁边有一个小的“Go”按钮。 IE 也会为任何使用箭头键的选择导航触发 onchange，这可能是任何不使用鼠标的用户
嗯。如果Scheduler.Refresh() 需要很长时间执行，你应该考虑debouncing the call。我不确定 ASP.NET 是否有任何内置功能，但如果没有，则该插件可以解决问题。
有趣，这是我的答案之一:P

标签： javascript jquery asp.net-mvc dom-events

【解决方案1】：

您可以在 ASP.NET MVC 项目中使用服务器控件（很少有例外）。键入时 DDL 在 IE/Chrome 中正常工作 - 请参阅 My blog Cascading DropDownList in ASP.Net MVC 和 Working with the DropDownList Box and jQuery 玩转我的 Cascading DDL 示例。

【讨论】：

这可能有帮助，但由于我们需要第三方控制，此页面必须保持为 aspx 页面。该项目是 MVC，但不是这个页面。谢谢。

【解决方案2】：

是的，onChange 事件正在正常工作。您可以做的是在窗口上附加一个计时器并检查该字段是否已被修改，而不是使用 onChange。

因此，您可以创建一个全局变量，当用户模糊表单时更新为 true，并创建一个计时器来检查用户是否进行了最后一次选择。

if(userBlur == true && userSelect == true){
    //do the code
    window.clearInterval();
}else{
    //wait for change
}

应该更接近您的预期。

【讨论】：

不，这里不需要使用计时器进行远程轮询。