Html onclick on选项标签不适用于IE和chrome

我正在使用

select

框的选项标记中的

onclick

事件

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

一
二
三
`

---

onclick

事件在IE和Chrome上不起作用，但在firefox上运行良好， 在这里，我不想在select标记bcz上使用

onchange

事件，如果用户再次选择相同的选项，它将不会触发事件

例如：假设用户第一次选择“一”下拉列表，我会在处理一些内容后打开一个弹出窗口，用户关闭弹出窗口，假设用户想要选择相同的“一”下拉列表，它不会触发任何事件。这可以通过在选项标签上使用onclick事件来解决，但它不适用于IE和chrome

---

有什么解决办法吗？

这通过记录点击次数模拟

选项上的
onclick
事件



第一次单击被忽略（用于展开下拉列表）
第二次点击实际上是你的“选择”。（然后重置单击计数）

但它不适合键盘交互

哦，我正在使用JQuery，但是您可以使用纯JS重新实现它


将脚本置于“选择”按钮上方
为select设置onclick和onblur，如代码所示
并自定义检查功能

我已经测试了它，它可以工作：）


selectHandler={
点击次数：0，
操作：功能（选择）
{
选择Handler。单击Count++；
如果（selectHandler.clickCount%2==0）
{
selectedValue=select.options[select.selectedIndex].value；
selectHandler.check（selectedValue）；
}
},
blur:function（）//需要正确的行为
{
如果（selectHandler.clickCount%2！=0）
{
选择Handler.clickCount--；
}
},
检查：功能（值）
{
//你可以定制这个
警报（“已更改！->”+值）；
}
}
1.
2.
3.
4.
点击
选项上的事件
标签将在IE、Safari和Chrome的大多数版本上失败：

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

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


一
二
三

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

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


一
二
三

这样，当且仅当选择了某个选项时，才能保证调用
check（）

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

到目前为止，似乎使用
标记并不能在所有浏览器中始终如一地工作。但是，如果我们使用库来模拟选择菜单，例如或创建一个选择菜单而不是使用
标记，那么
单击
事件将在
或
标记上触发，这在我测试的所有浏览器中都是一致的。
我有另一个建议，它不是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>


1.
2.
3.
4.

这样，即使用户两次选择相同的选项，也会触发事件。
问题是IE将显示空选项（它忽略样式属性），但单击它将不会触发事件，因为它总是以被选中开始，因此选择它不会在更改时触发…
我发现以下操作对我有效-而不是在单击时使用，在更改时使用，例如：

jQuery('#element select').on('change',  (function() {

   //your code here

}));

在选择标签的id中使用
功能（此）

比如说

<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>


var timesSelectClicked=0；
$（函数（）{
$（文档）。在（'点击按键'，'选择'，功能（e）{
如果（timesSelectClicked==0）
{
点击次数+=1；
}
else if（timesSelectClicked==1）
{
timesSelectClicked=0；
提示（$（'select option:selected'）.text（）；
}
});
});
此代码不适用于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>


2.
5.
10

这个孤子在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>


2.
5.
10
这适用于不同的浏览器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 if ($(this).val() == "2") {
        //Do Nothing
      }
      else {
        //Do Nothing
      }
    }); 
}); 

HTML：
挑选
ATM-支付堆栈（即时资金）
银行存款/转账
JQUERY：
$（函数（）{
$（'#howtopay'）。更改（函数（）{
如果（$（this.val（）=“1”）{
$（'fund#u with_atm'）.show（）；
$（“#向银行提供资金”）.hide（）；
} 
else if（$（this.val（）=“2”）{
//无所事事
}
否则{
//无所事事
}
}); 
}); 
你能给我们一把小提琴吗？@gdoron这还不够。给我们一个完整的例子。请…@gdoron我试着设置它，但无法做到bcz extjs正在正确加载kay zhu回答的问题是，它接近我想要的。但它现在在firefox中的行为有所不同（请参阅下面的评论），你能帮我解决这个问题吗？对不起，我不想猜测，当你有可用的演示时通知我。谢谢你的回复，它没有按预期工作。点击“两次”，它只会给你一个提示。不管怎么说，它很脆弱，我们不能使用这种逻辑。你说“点击两次只会弹出一个”是什么意思？无论所选索引是否已更改，当选择一个选项时，JSFIDLE中的代码都将触发一个事件。它几乎不易碎。我的观点是“无论所选索引是否已更改，当选择某个选项时，它都不会触发事件”。在chrome中尝试，当您第一次单击正确的下拉菜单时，它不会触发事件，但当您选择任何下拉菜单时，它会触发事件
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 if ($(this).val() == "2") {
        //Do Nothing
      }
      else {
        //Do Nothing
      }
    }); 
});