chrome 和 iPad 问题与 querySelectorAll

Question

我有以下代码：

var showonlyswitch = document.querySelectorAll('#showonlyswitch > optgroup > option');
for (var y = 0; y<showonlyswitch.length; y++) {
     showonlyswitch[y].addEventListener('click', showonlyproducts);
}

在 firefox 中工作，但不在 chrome 中工作，也不在 iOS safari 中工作。

据我所知（"caniuse" 告诉我），两种浏览器都应该支持 querySelectorAll 和 addEventListener。 （iOS Safari v.8.1 和 chrome v.39.0.2171.95（64 位））

我调用的函数非常简单：

function showonlyproducts() {

    var searchvalue = document.getElementById('showonlyswitch').value;
    if (searchvalue == 1) {
        window.location.href = 'pricing?close=1';
    }
}

首先我认为 window.location.href 会导致一些问题，但我试图 console.log 一些乱码并且它在 firefox 中有效但在 chrome 中无效。

我也试过改

var showonlyswitch = document.querySelectorAll('#showonlyswitch > optgroup > option');

到

var showonlyswitch = document.querySelectorAll('#showonlyswitch > option');

但这（显然）在任何浏览器中都不起作用。

select 在某些 optgroups 中是分开的，该函数应该在点击一个选项时触发，因为更改事件不足以满足这种情况，因为有可能在没有更改的情况下选择了解决方案事件被触发（无变化）。

正如我所说，代码在 firefox 中运行得非常好，所以不应该有任何拼写错误或其他东西（通常......），chrome 的控制台中没有错误。

这里有任何已知问题吗？

Answer 1

将点击事件绑定到 option 元素不可靠。而是使用 onchange 事件：

var showonlyswitch = document.querySelector('#showonlyswitch');
showonlyswitch.addEventListener('change', showonlyproducts);

至于这部分

the change event isn't sufficient for the situation because it is possible that a solution is chosen without the change event being triggered

尝试在 #showonlyswitch select 元素本身而不是 option 元素上绑定点击事件。