WWW FAQs: How do I let users pick the next page from a menu?


2006-02-02: Quite a few sites let users pick a page from a drop-down menu. Yes, this can be done with PHP or other server-side code. But it's easier to do with JavaScript, and the resulting menu lets the user change pages right away without clicking a separate "Go" button, as a normal HTML form without JavaScript would require.

The key here is to respond to changes in a <select> pulldown menu element by changing the URL of the page. The sample page shown below successfully does this. To use this code yourself, just insert your own labels and URLs instead of the examples shown here. You can use any valid URL, relative or absolute. The first choice on the menu is the default that appears when the user first loads the page, and so there is no URL to go with it.

Notice that I have also provided links directly to the pages, which appear only when the user has JavaScript turned off. It's important to remember that a small fraction of users will not have JavaScript enabled. And it's even more important to remember that Google can't read your JavaScript, so you must have normal links to your other pages inside a <noscript> element. If you don't, search engines will never find your pages. And that's bad news.

In this example, the pulldown menu appears right at the top of the page, but you can place that portion of the code anywhere you wish.

<html>
<head>
<title>Page Switcher</title>
<script>
// This code should go in the
// head element of your page

// You may use any labels you want.
// The first label must be the
// text shown when no choice has
// been made yet
var labels = new Array(
  "Choose Your Destination",
  "Page One",
  "Page Two",
  "Page Three",
  "Page Four"
);

// These URLs correspond to the
// labels. The default choice gets
// no URL
var urls = new Array(
  "",
  "one.html",
  "two.html",
  "three.html",
  "four.html"
);

function switchPages(index) {
  if (index == 0) {
    return;
  }
  location.href = urls[index];
}

function forceNoChoice() {
  // We don't want anything selected when the user
  // backs up to or otherwise revisits this page
  // without reloading it. So "forget" our selection
  // when we leave the page.
  var selector = document.getElementById('page_selector');
  selector.selectedIndex = 0;
}
</script>
</head>
<!-- You must have this onUnload handler or the
  back button will still show a choice -->
<body onUnload="forceNoChoice()">
<div align="center">
<script>
// Put this script element where you
// actually want the menu to appear
document.write('<select name="page_selector" id="page_selector"' +
'onChange="switchPages(selectedIndex)">');
for (i = 0; (i < labels.length); i++) {
  document.write('<option value="' + i + '">' + labels[i] + '</option>');
}
document.write('</select>');
</script>
<noscript>
<a href="one.html">Page One</a> |
<a href="two.html">Page Two</a> |
<a href="three.html">Page Three</a> |
<a href="four.html">Page Four</a>
</noscript>
</div>
</body>
</html>

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!