我有一个输入表单,它允许我从多个选项中进行选择,并在用户更改选择时执行一些操作。例如,
<select onChange="javascript:doSomething();">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
现在,doSomething()只在选择改变时被触发。
我想在用户选择任何选项时触发doSomething(),可能是相同的选项。
我已经尝试使用“onClick”处理程序,但在用户开始选择过程之前被触发。
那么,是否有一种方法在用户每次选择时触发一个函数?
更新:
Darryl提出的答案似乎有效,但并不总是有效。有时,当用户单击下拉菜单时,甚至在用户完成选择过程之前,事件就会被触发!
几个月前我做设计的时候也遇到了同样的问题。我发现的解决方案是在你正在使用的元素上使用.live("change", function())结合.blur()。
如果你想让它在用户点击时做一些事情,而不是改变,只需用点击替换改变。
我为我的下拉菜单分配了一个ID,选择并使用如下:
$(function () {
$("#selected").live("change", function () {
// do whatever you need to do
// you want the element to lose focus immediately
// this is key to get this working.
$('#selected').blur();
});
});
我看到这个问题没有选择答案,所以我想我应该给出我的建议。这对我来说非常有效,所以希望其他人在遇到困难时可以使用这段代码。
http://api.jquery.com/live/
编辑:使用on选择器而不是.live。参见jQuery .on()
这可能不能直接回答你的问题,但这个问题可以通过简单的设计调整来解决。我知道这可能不是100%适用于所有用例,但我强烈建议您重新考虑您的应用程序的用户流程,以及以下设计建议是否可以实现。
我决定做一些简单的事情,而不是黑客onChange()使用其他事件的替代方案,这并不是真正意义上的目的(模糊,点击等)。
我的解决方法是:
只需预先挂起一个没有任何值的占位符选项标记,如select。
所以,不要只使用下面的结构,这需要一些hack-y替代方案:
<select>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
考虑使用这个:
<select>
<option selected="selected">Select...</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
因此,通过这种方式,您的代码更加简化,并且每当用户决定选择默认值以外的内容时,onChange将按预期工作。如果您不希望他们再次选择第一个选项,甚至可以将disabled属性添加到第一个选项,并强制他们从选项中选择一些内容,从而触发onChange()触发。
At the time of this answer, I'm writing a complex Vue application and I found that this design choice has simplified my code a lot. I spent hours on this problem before I settled down with this solution and I didn't have to re-write a lot of my code. However, if I went with the hacky alternatives, I would have needed to account for the edge cases, to prevent double firing of ajax requests, etc. This also doesn't mess up the default browser behaviour as a nice bonus (tested on mobile browsers as well).
有时候,你只需要退一步,从大局出发,寻找最简单的解决方案。