Question

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

当选择下拉菜单展开时（我进行了快速Google搜索，但似乎无法实现）
在<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事件，但浏览器似乎对它有不同的反应。当您单击时，有些会做出反应，而当您更改值时，有些会做出反应。

Answer 1

试试这个：

element = document.getElementById('gender');

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

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

Answer 2

看起来我的两个选项都不可行（除非某人有办法修复破碎的事件）。

选项1。我尝试实施一些＆＃34;扩展跟踪器＆＃34;选择知道元素实际扩展的时间，但由于浏览器处理选择的方式不同，似乎不可能完成任务。即使找到某种神奇的配方，任何未来的浏览器更新都会很脆弱。

选项2。鉴于Firefox也因onchange事件而行为不端，我不知道有任何方法可以解决此类问题，也不知道如何强制Chrome做出反应事件它似乎忽略了（也许一些JavaScript大师可以在这里使用一些时髦的解决方案，但我会感到惊讶）。

因此，经过多次尝试，似乎与<select>的行为方式存在3个主要差异：

IE 10及更低版本使用非常有限的渲染引擎进行下拉（就样式而言）。
使用键盘时，Firefox无法正确处理onchange事件。
Chrome会忽略<option>个事件。

鉴于这种糟糕的组合，我不得不诉诸：

对IE＆lt; = 10个浏览器使用条件。
添加onkeydown事件以修复Firefox的onchange情况。
仅使用选择事件来绕过Chrome的限制。

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

我没有太多了解我想要做的事情，但我实际上是在尝试实现一个＆＃34;占位符风格＆＃34;选择元素，使我的表单具有统一的外观。有趣的部分是不同的浏览器如何处理<select>样式以及样式在下拉列表展开时以及何时不是这样。

有没有办法在Chrome中的选择选项元素上添加事件？

2 个答案: