有没有一种方法可以在Chrome中的Select Option元素上添加事件

Is there a way to add Events on Select Option Elements in Chrome?

本文关键字：Select 中的 Chrome Option 元素 事件 添加 一种 方法 有没有      更新时间：2023-09-26

我正在尝试向<select>元素添加自定义样式，由于跨浏览器的限制，我需要知道：

  1. 当选择下拉列表展开时（我在谷歌上快速搜索了一下，但似乎不可能）
  2. 在<option>元素上添加事件

第二个选项似乎适用于除Chrome以外的所有浏览器。我宁愿避免做一些讨厌的浏览器检测，所以如果有人有建议的话，我正在寻找解决这两个选项中任何一个的方法？？

以下适用于除Chrome以外的所有浏览器：

<select id="gender" name="gender">
     <option></option>
     <option class="click">Male</option>
     <option>Female</option>
     <option>Other</option>
</select>
<script>
element = document.getElementById('gender');
for (var iterator = 0; iterator < element.options.length; iterator++) {
    var optionElement = element.options[iterator];
    if (optionElement.className == 'click') {
        optionElement.addEventListener('click', function() {alert('gender')})
    }
}
</script>

我不能在<select>上使用事件的原因是，我需要知道下拉列表是否展开（上面的第1点）。我也考虑过使用onChange事件，但浏览器对它的反应似乎不同。有些浏览器在单击时会做出反应，另一些则在更改值时做出反应。

我的两个选项似乎都不可行（除非有人能修复坏事件）。

选项1.我试图在select上实现一些"扩展跟踪器"，以了解元素何时实际扩展，但由于浏览器处理select的方式不同，这似乎是不可能完成的任务。即使找到了某种神奇的配方，它对未来的任何浏览器更新都是脆弱的。

选项2.考虑到Firefox在处理onchange事件时也会出现错误，我不知道有什么方法可以解决这类问题，也不知道如何迫使Chrome对它似乎忽略的事件做出反应（也许一些JavaScript大师可以在这里提出一些时髦的解决方案，但我会感到惊讶）。

因此，经过几次尝试，似乎<select>的行为有三个主要差异：

  1. IE 10及更低版本使用非常有限的渲染引擎进行下拉（就风格而言）
  2. Firefox在使用键盘时无法正确处理onchange事件
  3. Chrome会忽略<option>事件

考虑到这种糟糕的组合，我不得不求助于：

  1. 对IE使用条件<=10个浏览器
  2. 添加一个onkeydown事件来修复Firefox的onchange情况
  3. 仅使用select事件来绕过Chrome的限制

Firefox上的渲染效果并不理想，因为存在某种延迟，但考虑到<select>元素的非标准性，这看起来是最好的。

我没有过多地了解我试图做什么的细节，但实际上我试图在选定的元素上实现一个"占位符样式"，以便在我的表单上有一个统一的外观和感觉。有趣的部分是不同的浏览器如何处理<select>样式，以及当下拉菜单展开时和不展开时样式如何不同。

试试这个：

element = document.getElementById('gender');
element.addEventListener('change', function() {
    if (this.value === 'Male') {
        alert(this.value);
    }
});

此代码已在OSX上用Chrome、Firefox和Safari进行了测试。

相关文章：