On this page:

The code The form Know more

to directory

select menu links

Normally a select menu is part of a form, that is processed by a server program (such as something written in php). But we can also do some things through javascript, such as make a selected menu item jump to another page.

 

The code

Inside the <head> ... </head> tags add this JavaScript code: 

<script type="text/javascript">
  // This function is called from the pop-up menus to transfer to
  // a different page. Ignore if the value returned is a null string:
  function goPage (newURL) {

      // if url is empty, skip the menu dividers and reset the menu selection to default
      if (newURL != "") {
      
          // if url is "-", it is this page -- reset the menu:
          if (newURL == "-" ) {
              resetMenu();            
          } 
          // else, send page to designated URL            
          else {  
            document.location.href = newURL;
          }
      }
  }

// resets the menu selection upon entry to this page:
function resetMenu() {
   document.gomenu.selector.selectedIndex = 2;
}
</script>
 

The working form

Here is the code for the menu above. You put this in the body of your web page (of course change the menu items to your menu!). 

<form name="gomenu">
  <select onChange="goPage(this.options[this.selectedIndex].value)" name="selector">
      <option value = "/">Home</option>
      <option value = "-"> --------------</option>
      <option value = "/about" selected>About us</option>
      <option value = "/images">Images</option>
  </select>
  <!-- if they don't have javascript, or is search engine, screen reader for blind, 
        text browser, etc, provide alternate links: -->
  <noscript>
      <a href="index1.html">Home</a> / 
      <!-- this page! so nothing will happen. -->
      <option value = "-">Select menu links</option>
      <a href="/about">About us</a> 
      <a href="/images">Images</a> 
      etc ...
  </noscript>
</form>
 

Know more

More javascript howtos
General info:

select_href_link.html
Written 19 July 2009
Revised 19 July 2009