onclick on option tag not working on IE and chrome [英] onclick on option tag not working on IE and chrome

问题描述

我在选择标签中使用 onclick 事件选择框

 < select> 
< option onclick =check（）> one< / option> 
< option onclick =check（）> two< / option> 
< option onclick =check（）> three< / option> 
< / select>`
  

onclick 事件不适用于IE和Chrome，但它在Firefox，
中工作正常，我不想在选择标签bcz上使用 onchange 事件它会不会触发一个事件，如果用户再次选择相同的选项

例如：说第一次用户选择one下拉我会打开一个弹出处理完一些东西后，用户关闭弹出窗口，假设用户想要选择相同的one下拉菜单，它将不会触发任何事件。这可以通过在选项标签上使用onclick事件来解决，但它不能在IE和Chrome上工作

有没有解决这个问题的方法？

解决方案

onclick 事件在选项标记在大多数版本的IE，Safari和Chrome上都会失败：参考资料

如果您想在用户选择时触发事件，为什么不简单使用：

 < select onclick =check（） > 
< option> one< / option> 
< option> two< / option> 
< option> three< / option> 
  

如果您想要使用用户选择的特定选项执行操作：

（b）

 < select onclick =if（typeof（this.selectedIndex）！='undefined'）check（this.selectedIndex）> 
< option> one< / option> 
< option> two< / option> 
< option> three< / option> 
  

通过这种方式，您可以保证调用 check（）当且仅当选择一个选项。

编辑：正如@ user422543在评论中指出的，这个解决方案在Firefox中不起作用。因此，我在这里问了另一个问题：

到目前为止，使用< select> 标签看起来并不一致所有浏览器。但是，如果我们使用库来模拟选择菜单，例如 jQuery UI选择菜单或选择创建一个选择菜单，而不是使用< select> 标签，点击事件将在< ul> 或< li> 标记，这在我测试的所有浏览器中都是一致的。

I am using onclick event in option tag for select box

<select>
    <option onclick="check()">one</option>
    <option onclick="check()">two</option>
    <option onclick="check()">three</option>
</select>`

onclick event is not working on IE and Chrome but it is working fine in firefox, here I don't want to use onchange event on select tag bcz it will not trigger an event if user selects same option again

Eg:say first time user selects "one" dropdown I will open a popup after processing some stuff user closes the popup,suppose if user wants to select same "one" dropdown it will not trigger any event.this can be solved using onclick event on option tag but its not working on IE and chrome

Is there any work around for this ?

解决方案

onclick event on option tag will fail on most versions of IE, Safari and Chrome: reference

If you want to trigger an event whenever user select, why not simply use:

<select onclick="check()">
<option>one</option>
<option>two</option>
<option>three</option>

And if you want to do something with the specific option user selected:

<select onclick="if (typeof(this.selectedIndex) != 'undefined') check(this.selectedIndex)">
<option>one</option>
<option>two</option>
<option>three</option>

This way you are guaranteed to call check() if and only if an option is selected.

Edit: As @user422543 pointed out in the comments, this solution will not work in Firefox. I therefore asked another question here: Why does Firefox react differently from Webkit and IE to "click" event on "select" tag?

So far it seems using <select> tag is will not work consistently in all browsers. However, if we simulate a select menu using library such as jQuery UI select menu or Chosen to create a select menu instead of using <select> tag, click event will be fired on <ul> or <li> tag which is consistent in all browsers I tested.

这篇关于onclick on option tag not working on IE and chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！