Drop-down Jump Menus

Accessible scripting index | tom.me.uk home

A common example of how not to use scripting correctly is using it to trigger a select element to go to another URL, when the onchange event fires - but not providing an alternative for browsers without scripting - such as...

<select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option selected="selected">Select a page...</option>
<option value="/">Home page</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.bbc.co.uk/">BBC</option>
</select>

Which produces results such as (this select will not navigate away from this page)...

The Problem

If you don't have scripting, a menu such as the above one will do nothing. The user will be able to change the selected option, but it will not go anywhere - which will result in one very confused user.

I have seen several sites that use such a method as the only way of navigating around the site, and therefore are completely unusable and useless without scripting.

The Solution

Very simple, use your old friend the noscript element. Either...

Create a list of simple, alternative links within the noscript. You can then simply document.write the drop-down menu, so only users with scripting ever get to see it...
<script type="text/javascript">
document.write("<select>...</select>");
</script>

<noscript>
<a href="/">Home page</a><br>
<a href="http://www.google.com/">Google</a><br>
<a href="http://www.bbc.co.uk/">BBC</a><br>
</noscript>

OR
Provide a simple server-side script that redirects the user - even if they have no scripting - such as...
<form method="get" action="myRedirectorScript.cgi">
<select name="url" onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;">
<option selected="selected">Select a page...</option>
<option value="/">Home page</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.bbc.co.uk/">BBC</option>
</select>
<noscript><input type="submit" value="go"></noscript>
</form>
This quickly redirects the user without bothering the server if they have scripting, but sends the URL to a server-side script to forward the browser if it cannot.

A Button for All

Using onchange to trigger navigation does have a few disadvantages, however. If the user attempts to change the selected option using the keyboard only, Internet Explorer on Windows only allows the user to select the second option, before the navigation occurs. You can resolve this simply by providing a "go" button for all users:

<form method="get" action="myRedirectorScript.cgi" onsubmit="if (this.url.selectedIndex > 0) location.href=this.url[this.url.selectedIndex].value;">
<select name="url">
<option selected="selected">Select a page...</option>
<option value="/">Home page</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.bbc.co.uk/">BBC</option>
</select>
<input type="submit" value="go" title="Go to the page selected">>
</form>