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野生動物園中工作。

據我所知（和“ 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');

但這（顯然）在任何瀏覽器中均不起作用。

選擇被分離在某些optgroup中，並且該功能應在單擊某個選項時觸發，因為更改事件不足以解決這種情況，因為選擇解決方案時可能不會觸發更改事件（無更改）。

就像我說的那樣，代碼在Firefox中工作得很好，因此不應有任何錯別字或其他內容（通常是...），Chrome的控制台中沒有錯誤。

這里有什么讓您想到的已知問題嗎？

Answer 1

將點擊事件綁定到option元素是不可靠的。 而是使用onchange事件：

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

至於這部分

更改事件不足以適應這種情況，因為有可能在不觸發更改事件的情況下選擇了解決方案

嘗試在#showonlyswitch選擇元素本身而不是option元素上#showonlyswitch tom bind click事件。