I have created a mobile menu on my site with the html below:

```html
<select id="mobile-select" name="mobile-select" onchange="if (this.value) window.location.href=this.value">
    <option class="mobile-select-label" value>Navigation</option>
    <option class="mobile-select-label" value="http://www.themathsproject.co.uk/home">Home</option>
    <option class="mobile-select-label" value="http://www.themathsproject.co.uk/projects/all">Projects</option>
    <option class="mobile-select-label" value="http://www.themathsproject.co.uk/tutoring">Tutoring</option>
    <option class="mobile-select-label" value="http://www.themathsproject.co.uk/contact">Contact</option>
</select>
```

When the selects an option on the dropdown, they're sent to the appropriate page. When on that new page, I want the default option (shown on the dropdown) to correspond to the new page.

E.g. if the user had clicked Tutoring, the page would reload to the Tutoring page. Once on the Tutoring page, I want the dropdown to show "Tutoring" by default.

Note how if the user clicks "Projects", they're sent to "../projects/all" instead of just "/projects".

I have tried to implement several other techniques (found on very similar stack exchange questions) but couldn't get any to work.

Note: The onchange attribute is responsible for directing the user to the appropriate page after a selection has been made.

Any help would be greatly appreciated,

Jack