如何在选项标签中触发事件？答案

【问题标题】：How can I fire an event in an option tag?如何在选项标签中触发事件？
【发布时间】：2013-12-11 13:16:02
【问题描述】：

我为此寻找解决方案，但找不到。

我有一个这样的简单选择：

<select id="sltFiltroPedidos">
  <option value="todos">Todos</option>
  <option value="hoje">de hoje</option>
  <option value="semana">da semana</option>
  <option value="periodo">Período</option>
  <option value="pedido">Número do pedido</option>
</select>

用户总是点击一个选项，必须触发一个 javascript 事件。 select 中的 onChange 事件对我不起作用，因为用户可以选择相同的选项，并且该事件也必须被触发。

我在选项上尝试了 onClick 事件。它适用于 IE 和 FF，但不适用于 Chrome。任何想法我该怎么做？

【问题讨论】：

什么在 Chrome 中不起作用？ jsfiddle.net/t9suH
如果他们选择相同的项目，状态不应该相同吗？似乎您应该有一个“选择一个”选项。
选项中的 onClick 事件在 Chrome 上不起作用。我在onClick中打开了一个fancybox，每次用户点击对应选项时都必须打开它。

标签： javascript jquery events html-select

【解决方案1】：

我写了一段代码，但它在 IE 上不起作用，试试看：http://jsfiddle.net/shahe_masoyan/scuhb/1/

<select id="sltFiltroPedidos">
  <option value="todos">Todos</option>
  <option value="hoje">de hoje</option>
  <option value="semana">da semana</option>
  <option value="periodo">Período</option>
  <option value="pedido">Número do pedido</option>
</select>


var isOpen = false;
$('#sltFiltroPedidos').on('mouseup', function () {
    if (isOpen){
        alert(this.value);
    }
    isOpen = !isOpen;
});

【讨论】：

我刚刚将 mouseup 更改为 click 事件，这在两种浏览器中都有效。非常感谢你的想法，伙计！
我没有投票只是因为我没有这方面的声誉.. =D
在我忘记之前，我还包括了一个 $('#sltFiltroPedidos').blur(function () { isOpen = false; })，以防用户点击选择并离开它，没有选择一个选项。

【解决方案2】：

根据您的问题，您可以执行以下操作：-

<select id="sel" onblur="showme()">
  <option value="todos" >Todos</option>
  <option value="hoje" >de hoje</option>
  <option value="semana" >da semana</option>
  <option value="periodo" >Período</option>
  <option value="pedido" >Número do pedido</option>
</select>

但我不知道这个正确的选择与否。但这会像你所说的那样工作。

function showme()
{
    alert(document.getElementById('sel').value);
}

【讨论】：

那是我的第一个代码。但这对我来说在 Chrome 上不起作用，我不知道为什么。
我已经编辑了，如果它对你有用，那就试试吧
好的，这是一个旧线程..这可行，但不知何故它需要很多时间来执行......你知道为什么吗？

【解决方案3】：

你可以试试onclicklike，

var prevValue=$('select').val();
$('select').on('click',function(){
   if(prevValue==this.value) // code for same values
   // your code to run
});

【讨论】：

但是 onClick 事件会在用户点击选择时触发，在他选择选项之前，对吧？这对我来说是个问题，因为只有在用户选择了他的选项后才能触发该事件。

【解决方案4】：

我有同样的问题。在我的任务中，我需要获取所选选项的值。这对我有帮助：

let selectedOption = "";
<select>.addEventListener("change", event => {
    selectedOption = event.target.value
});

select 变量显然是 tag 。它可能看起来很奇怪，但 select 采用所选选项的值，这就是代码起作用的原因。

【讨论】：

【解决方案5】：

用途：

 $('#sltFiltroPedidos').on('change', function() {
    alert( this.value );// or this.val()
 });

希望这对你有用

【讨论】：

正如我所说，这对我不起作用，因为当用户选择相同的选项时不会触发该事件。