'window.open' Blocked By Chrome With Change Event

I am trying to open a window based on an onChange event on a select element without getting blocked by Chrome's popup blocker. The problem is demonstrated here. https://jsfiddle.ne

Solution 1:

That is by design, the only time browsers don't block window.open is when you are handling a click event.

My suggestion is to provide a link that changes when users select from the dropdown.

I advise against opening a popup because users don't expect a popup when you select from a drop down, that is why popup blockers don't typically allow this. Even if you find something that works in a browser (https://jsfiddle.net/yyfe0824/5/ in Firefox), it could break in the future.

Solution 2:

You should be able to work around this by having click wired up and simply determine if the new selected item matches the previous selected item.

I've edited the previous JSFiddle to make it work.

dropdown.addEventListener('click', Foo);    
functionFoo(e)
{
    var selectedIndex = dropdown.selectedIndex;
    if(selectedIndex !== oldSelectedIndex)
    {
        var val = dropdown.options[selectedIndex].value;
        var opened = window.open(val);
        oldSelectedIndex = selectedIndex;
    }
}