HTML <select> 是否有 onSelect 事件或等效事件?

IT技术 javascript html html-select dom-events
2021-01-25 06:01:49

我有一个输入表单,可让我从多个选项中进行选择,并在用户更改选择时执行某些操作例如,

<select onChange="javascript:doSomething();">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

现在,doSomething()仅在选择更改时触发

我想doSomething()在用户选择任何选项时触发,可能再次选择相同的选项

我曾尝试使用“onClick”处理程序,但它在用户开始选择过程之前被触发。

那么,有没有办法在用户每次选择时触发一个功能?

更新:

Darryl 建议的答案似乎有效,但并不一致。有时,即使在用户完成选择过程之前,只要用户单击下拉菜单,就会触发事件!

6个回答

这是最简单的方法:

<select name="ab" onchange="if (this.selectedIndex) doSomething();">
    <option value="-1">--</option>
    <option value="1">option 1</option> 
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>

适用于鼠标选择和键盘上/向下键,选择重点选择。

但这不会做任何事情“当用户选择......再次相同时”,对吧?
2021-03-26 06:01:49
这个答案有最多的赞成票,但它没有解决问题!doSomething()当用户选择已选择的选项时,不会触发功能。请参阅此plunk,其中背景颜色仅在您选择与当前所选选项不同的选项时才会更改
2021-03-27 06:01:49
FWIW:如果您只想在doSomething()选择一个特定选项时调用,例如上例中的“选项 3”,请使用if (this.selectedIndex==4)数字“4”表示选项数字索引,而不是指定的value! (即,“选项 3”是 的第四个选项<select name="ab">)。
2021-04-01 06:01:49
@TJCrowder 你是对的——不确定我写下半部分时在想什么。我已经删除了原始评论,为了不混淆其他人,这里是原始评论(请注意,前半部分是正确的,后半部分是错误的): 对于第一个选项,这将无法正常工作has index 0: 0 is false in JS so doSomething() 不会被执行。相反,使用if(type(this.selectedIndex) != undefined; doSomething()
2021-04-02 06:01:49
请注意,@KayZhu 的评论只对了一半:正确的做法是检查“selectedIndex”是否大于或等于零(或大于 -1)。没有“type()”函数,“selectedIndex”也永远不会有undefined
2021-04-03 06:01:49

我需要完全相同的东西。这对我有用:

<select onchange="doSomething();" onfocus="this.selectedIndex = -1;">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

支持这个:

当用户选择任何选项时,可能再次选择相同的选项

也适用于 Win8 IE10、Win7 IE9、Win7 IE8、WinXP IE7 和 IE6。Jsfiddle 或 IE 恶作剧迫使您直接使用fiddle.jshell.net/ecmanaut/335XK/show/light进行测试,尽管 - 他们的编辑器视图无法加载示例中使用的 jQuery 以提高可读性。以上只是用鼠标交互测试;为了让这个键盘友好,这个 hack 可能需要额外的工作,因为至少旧的 IE 在你有机会选择“C”之前愉快地触发更改事件。
2021-03-15 06:01:49
如果已经选择了一个值,则通过这个选项卡将导致问题。只要将该字段导航到该值就会消失,这是一种非常意外的用户行为。此外,当您按 Tab 键时,您将丢失选择,即使您什么也没做。否则,好主意。
2021-03-26 06:01:49
真的很棒的提示,。帮助我解决了无法选择第一个选项的问题
2021-03-27 06:01:49
如果在失去焦点时为 -1,则使用例如 jQuery .blur() 恢复原始选择。
2021-03-29 06:01:49
jsfiddle.net/ecmanaut/335XK适用于 osx Chrome 30、Safari 6、Firefox 17。
2021-04-11 06:01:49

几个月前我在创建设计时遇到了同样的问题。我找到的解决方案是.live("change", function()).blur()您正在使用的元素结合使用。

如果您希望它在用户单击时执行某些操作,而不是更改,只需替换changeclick.

我为我的下拉菜单分配了一个 ID selected,并使用了以下内容:

$(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()

这如何帮助解决问题中表达的问题,即在选择更改之前什么都不会发生
2021-03-15 06:01:49
谢谢!.blur() 有帮助。在 IE7 中,如果代码中没有 .blur(),则 jQuery 的更改事件会触发两次。
2021-03-16 06:01:49
对于现在查看的任何人来说, .live 已从 1.9 api.jquery.com/live/#live-events-handler完全删除使用 .change 作为快捷方式api.jquery.com/change/#change-handler
2021-03-30 06:01:49
@LarsH 这个问题已经好几年了,不确定——我可能读错了这个问题并且感到困惑。
2021-04-07 06:01:49

只是一个想法,但是否有可能对每个<option>元素进行点击?

<select>
  <option onclick="doSomething(this);">A</option>
  <option onclick="doSomething(this);">B</option>
  <option onclick="doSomething(this);">C</option>
</select>

另一种选择是在选择上使用 onblur。这将在用户点击远离选择时触发。此时,您可以确定选择了哪个选项。为了让它在正确的时间触发,选项的 onclick 可能会模糊该字段(使其他内容处于活动状态或只是 .blur() 在 jQuery 中)。

在火狐中工作。
2021-03-19 06:01:49
该列表可能很长。
2021-04-03 06:01:49
@Darryl 这实际上并没有按预期工作。有时甚至在用户完成选择之前就会触发事件。请参阅我添加到问题中的更新。
2021-04-04 06:01:49
将事件处理程序放在选项上将在所有版本的 IE 中失败!webbugtrack.blogspot.com/2007/11/...
2021-04-04 06:01:49

onclick 方法并不完全糟糕,但如上所述,当值未通过鼠标单击更改时,它不会被触发。
但是可以在 onchange 事件中触发 onclick 事件。

<select onchange="{doSomething(...);if(this.options[this.selectedIndex].onclick != null){this.options[this.selectedIndex].onclick(this);}}">
    <option onclick="doSomethingElse(...);" value="A">A</option>
    <option onclick="doSomethingElse(..);" value="B">B</option>
    <option onclick="doSomethingElse(..);" value="Foo">C</option>
</select>