Chrome和iPad带有querySelectorAll的问题

Question

I have the following code:

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

working in firefox, but not in chrome and not in iOS safari.

As far as I know (and "caniuse" tells me), querySelectorAll and addEventListener should both be supported by both browsers. (iOS safari v.8.1 and chrome v.39.0.2171.95 (64-bit))

The function I am calling with this is quite simple:

function showonlyproducts() {

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

First I thought window.location.href would cause some problems, but I tried to console.log some gibberish and it worked in firefox but not in chrome.

I also tried to change

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

to

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

but that (obviously) doesn't work in any browser.

The select is separated in some optgroups and the function should trigger on click on an option, as the change event isn't sufficient for the situation because it is possible that a solution is chosen without the change event being triggered (no change).

As I said, the code is working perfectly fine in firefox, so there shouldn't be any typos or something (usually ...), there are no errors in chrome's console.

Are there any known issues which come to your mind with anything here?

Answer 1

Binding click events to option elements is not reliable. Instead use onchange event:

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

As for this part

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

Try tom bind click event on #showonlyswitch select element itself rather then option elements.