Html onclick on option 标签不适用于 IE 和 chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9972280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick on option tag not working on IE and chrome
提问by Lohith MV
I am using onclickevent in option tag for selectbox
我onclick在select框的选项标签中使用事件
<select>
<option onclick="check()">one</option>
<option onclick="check()">two</option>
<option onclick="check()">three</option>
</select>`
onclickevent is not working on IE and Chrome but it is working fine in firefox,
here I don't want to use onchangeevent on select tag bcz it will not trigger an event if user selects same option again
onclick事件在 IE 和 Chrome 上不起作用，但在 Firefox 中运行良好，这里我不想onchange在选择标签上使用事件 bcz 如果用户再次选择相同的选项，它不会触发事件
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
例如：说第一次用户选择“一个”下拉菜单我会在处理一些用户关闭弹出窗口后打开一个弹出窗口，假设如果用户想要选择相同的“一个”下拉菜单它不会触发任何事件。这可以使用 onclick 事件解决在选项标签上，但它不适用于 IE 和 chrome
Is there any work around for this ?
有什么解决办法吗？
回答by K Z
onclickevent on optiontag will fail on most versions of IE, Safari and Chrome: reference
onclickoption在大多数版本的 IE、Safari 和 Chrome上，标记上的事件将失败：参考
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.
这样，您就可以保证check()且仅在选择选项时拨打电话。
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?
编辑：正如@user422543 在评论中指出的那样，此解决方案在 Firefox 中不起作用。因此，我在这里问了另一个问题：为什么 Firefox 对“select”标签上的“click”事件的反应与 Webkit 和 IE 不同？
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 menuor Chosento create a select menu instead of using <select>tag, clickevent will be fired on <ul>or <li>tag which is consistent in all browsers I tested.
到目前为止，似乎使用<select>tag is 不会在所有浏览器中始终如一地工作。但是，如果我们使用诸如jQuery UI 选择菜单或Chosen 之类的库来模拟选择菜单来创建选择菜单而不是使用<select>标签，click则将触发事件<ul>或<li>标签，这在我测试的所有浏览器中都是一致的。
回答by mamashare
I have another suggestion, it's not 100%, but almost:
我还有一个建议，不是 100%，而是几乎：
<select onchange="valueChanged(this.value); this.selectedindex = -1">
<option style="display: none"></option>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
</select>
This way the event will be triggered even if the user selected the same option twice. The hitch is that IE will display the empty option (it ignores the style attribute), but clicking it will not fire the event, since it always starts out as being selected, and therefore selecting it does not trigger onchange...
这样即使用户两次选择相同的选项也会触发事件。问题是 IE 将显示空选项（它忽略 style 属性），但单击它不会触发事件，因为它始终以被选中的状态开始，因此选择它不会触发 onchange ...
回答by Greg
This emulates an onclickevent on your options by recording the number of clicks.
这通过记录点击次数来模拟onclick您的options上的事件。
- The first click is ignored (used to expand your dropdown),
- The second click is effectively your "selection". (The click count is then reset).
- 第一次点击被忽略（用于扩展你的下拉菜单），
- 第二次点击实际上是您的“选择”。（然后点击计数被重置）。
It doesn't cater for keyboard interaction though....
虽然它不适合键盘交互....
Oh and I'm making use of JQuery, but you could re-do it using pure JS
哦，我正在使用 JQuery，但你可以使用纯 JS 重新做它
回答by Michael
You just have to
你只需要
- put the script above the select,
- set onclick and onblur for select as shown in code
- and customize the check function.
- 将脚本放在选择上方，
- 如代码所示，为 select 设置 onclick 和 onblur
- 并自定义检查功能。
I have tested it and it works :).
我已经测试过了，它有效:)。
<script>
selectHandler = {
clickCount : 0,
action : function(select)
{
selectHandler.clickCount++;
if(selectHandler.clickCount%2 == 0)
{
selectedValue = select.options[select.selectedIndex].value;
selectHandler.check(selectedValue);
}
},
blur : function() // needed for proper behaviour
{
if(selectHandler.clickCount%2 != 0)
{
selectHandler.clickCount--;
}
},
check : function(value)
{
// you can customize this
alert('Changed! -> ' + value);
}
}
</script>
<select onclick="selectHandler.action(this)" onblur="selectHandler.blur()">
<option value="value-1"> 1 </option>
<option value="value-2"> 2 </option>
<option value="value-3"> 3 </option>
<option value="value-4"> 4 </option>
</select>
回答by Elina Lulle
I found that the following worked for me - instead on using on click, use on change e.g.:
我发现以下对我有用 - 而不是在点击时使用，在更改时使用，例如：
jQuery('#element select').on('change', (function() {
//your code here
}));
回答by kali doss
Use function(this)in id of select tag
function(this)在 select 标签的 id 中使用
for example
例如
<script type="application/javascript">
var timesSelectClicked = 0;
$(function() {
$(document).on('click keypress', 'select', function (e) {
if (timesSelectClicked == 0)
{
timesSelectClicked += 1;
}
else if (timesSelectClicked == 1)
{
timesSelectClicked = 0;
prompt($('select option:selected').text());
}
});
});
</script>
回答by OguzTR
This code is not working in Google Chrome but is working in Mozilla.
此代码不适用于 Google Chrome，但适用于 Mozilla。
<select>
<option value="2" (click)="myFunction($event)">
<div>2</div>
</option>
<option value="5" (click)="myFunction($event)">
<div>5</div>
</option>
<option value="10" (click)="myFunction($event)">
<div>10</div>
</option>
</select>
This solition is working in Chrome and Mozilla. I didn't test in Safari.;
此解决方案适用于 Chrome 和 Mozilla。我没有在 Safari 中测试。
<select (change)="myFunction($event)">
<option value="2">
<div>2</div>
</option>
<option value="5">
<div>5</div>
</option>
<option value="10">
<div>10</div>
</option>
</select>
回答by Godswill Francis
this works on different browsers CHROME, FIREFOX, IE, AVAST BROWSER, BRAVE, Etc... And user can change the option as many times as possible with the event still occurring over and over again.
这适用于不同的浏览器 CHROME、FIREFOX、IE、AVAST BROWSER、BRAVE 等......并且用户可以尽可能多地更改选项，而事件仍然会一遍又一遍地发生。
HTML:
<select id="howtopay">
<option selected>Select</option>
<option value="1">ATM - PAYSTACK (Instant Funding)</option>
<option value="2">BANK DEPOSIT/TRANSFER</option>
</select>
JQUERY:
$(function(){
$('#howtopay').change(function() {
if ($(this).val() == "1") {
$('#fund_with_atm').show();
$('#fund_with_bank').hide();
} else {
//Do Nothing
}
});
});
$(function(){
$('#howtopay').change(function() {
if ($(this).val() == "2") {
$('#fund_with_bank').show();
$('#fund_with_atm').hide();
} else {
//Do Nothing
}
});
});
