My javascript drop down list doesn't work on safari browser

July 29, 2022

I created a drop down list which works perfectly on chrome but when I’m trying on safari it doesn’t work.
I don’t have any clue on how to solve it!
Here my code :

<body>
    <style type="text/css">
 select#portfolio {
    font-size: 15px;
    color: #000000;
    background: #ffffff;
}

    </style>

<form name="webpage">
<select name="portfolio" id="portfolio">
<option value="#" selected="selected">HTML</option>
<option value="agence-immobiliere-francophone-marbella/">CSS</option>
<option href="#" value="JavaScript.html">JAVASCRIPT</option>
<option href="#" value="https://www.youtube.com/channel/UCjMpsBpg8uv6kjPOyJuTmww">youtube</option>
</select>
</form>


<script type ="text/javascript">
var urlMenu = document.getElementById('portfolio');
urlMenu.onchange = function()
{
var userOption = this.options[this.selectedIndex];
if (userOption.value != "nothing")
{
window.open(userOption.value, "HTML CSS javascript", "");
}

}

</script>
</body>

>Solution :

It is because Safari would prevent window.open() from executing. Safari thinks that it would create annoying popups that users won’t like. You can go to Safari settings and uncheck Block pop-up windows.

But to make it work for every one, one solution is to replace window.open() with window.location.href. This will, however, not open the link in a new tab but will replace the current tab with the destination.

There are other workarounds to this but this is one of them. If you think this works for you, here is a revised code:

<body>
<style type="text/css">
    select#portfolio {
        font-size: 15px;
        color: #000000;
        background: #ffffff;
    }

</style>

<form name="webpage">
    <select name="portfolio" id="portfolio">
        <option value="#" selected="selected">HTML</option>
        <option value="agence-immobiliere-francophone-marbella/">CSS</option>
        <option href="#" value="JavaScript.html">JAVASCRIPT</option>
        <option href="#" value="https://www.youtube.com/channel/UCjMpsBpg8uv6kjPOyJuTmww">youtube</option>
    </select>
</form>


<script type ="text/javascript">
var urlMenu = document.getElementById('portfolio');
urlMenu.onchange = function()
{
    var userOption = this.options[this.selectedIndex];
    if (userOption.value != "nothing")
    {
        window.location.href = userOption.value;
    }
}
</script>
</body>