I had always been bothered by the way select menus are presented and packaged on various Javascript web sites. I always felt that the presentations lacked two things:

1. The approach used to enter data tended to be error prone. Many used two arrays, one contained the entries that appear in the menu, and the second array contains the corresponding URLs. The user had to make sure that the select entries and URL corresponded. I prefer to keep the select menu entries and their corresponding URLs together, to make creation of the select menu easier for web page developers.
2. Why makes the web page developer write all the necessary code? I prefer to have a Javascript function that is called, with appropriate parameters, and the appropriated HTML is automatically generated.

As you may have noticed by viewing my web site, I prefer to create my select menus without "go" buttons. When a person makes a selection, the link to the corresponding URL is made automatically without a "go" button. In a later posting, I will place a "go" button version in my Javascript library.

This package is very easy to use. It takes three steps:

1. Create the script tag reference to the Select Menu package.
2. Create the array of select menu references and corresponding URLs.
3. Create the call to the menu generator within script tags at the appropriate location within the HTML file.

function selectObject() {
  return (this);
}

The makeSelectArray function processes the parameters passed to it to create the array of select menu entries and corresponding URLs. Each array location contains three attributes, Name, Url, and Target, where the select menu entry, the URL, and the URL target, respectively, are placed,

function makeSelectArray() {
  var thisindex = 0; // main menu index
  var argindex = 0;  // indexes thru parameters
  while ((makeSelectArray.arguments.length) < argindex) {
    this[thisindex]=new selectObject();
    this[thisindex].Name=makeSelectArray.arguments[argindex++]; 
    this[thisindex].Url=makeSelectArray.arguments[argindex++]; 
    this[thisindex].Target=makeSelectArray.arguments[argindex++];
    thisindex++;
  }
  return (this);
}

function writeSelectMenu(ArrayName) {
  document.write('<FORM NAME = "',curName(),'">');
  // write categories menu  
  document.write('<SELECT NAME="Categories" onChange=
      "confirmChange(\'',curName(),'\', \'',ArrayName,'\')">');   
  for (var i in this[ArrayName]){
    document.write('<OPTION>', this[ArrayName][i].Name, '</OPTION>');
  }
  document.writeln('</SELECT></FORM>');
  newName();
}

function confirmChange(MenuName, ArrayName) {
  var PIdx=document[MenuName].Categories.selectedIndex;
  document[MenuName].Categories.options[0].selected = true;
  if (this[ArrayName][PIdx].Url != null) {
    if (this[ArrayName][PIdx].Target == "_parent") {
      parent.location.href=this[ArrayName][PIdx].Url;
    } else if (this[ArrayName][PIdx].Target == null){
      document.location.href=this[ArrayName][PIdx].Url;
    } else {
      parent[this[ArrayName][PIdx].Target].location.href=
        this[ArrayName][PIdx].Url;
    }
  }
}

<script language=Javascript src ="http://www.cs.uofs.edu/~beidler/jslib/uniquenames.js">
</script>
<script language=Javascript src ="http://www.cs.uofs.edu/~beidler/jslib/selectmenu.js">
</script>

var VariableName = new makeSelectArray(
  "MenuEntry1", "URL1", Frame1,
  "MenuEntry2", "URL2", Frame2,
  "MenuEntry3", "URL3", Frame3,
  . . .

  "MenuEntryn", "URLn", Framen,
)

var JSbyDate = new makeSelectArray(
  "Select an item", null, null,
  "August 18, 1998: SuperRef",          "../jslib/superref.html", null, 
  "August 16, 1998: TimedDisplay(revisited)", "timed/page1.html", null,
  "August 14, 1998: OnLoadPak",        "../jslib/onloadpak.html", null, 
  "May 8, 1998: Towers of Hanoi (Part 3)", "hanoi/towers03.html", null,
  "May 6, 1998: Towers of Hanoi (Part 2)", "hanoi/towers02.html", null,
  "May 4, 1998: A Queue Object",           "whatsnew/queue.html", null,
  "May 3, 1998: Towers of Hanoi (Part 1)", "hanoi/towers01.html", null,
  "April 30, 1998: A Binary Tree Object ",  "whatsnew/tree.html", null,
  "April 28, 1998: A List Object",          "whatsnew/list.html", null,
  "April 23, 1998: A Stack Object",        "whatsnew/stack.html", null,
  "April 21, 1998: What\'s \"New\"?",        "whatsnew/new.html", null,
  "March 30, 1998: Naming Objects",            "names/name.html", null,
  "March 21, 1998: Timed HTML",               "timed/page1.html", null,
  "March 19, 1998: Javascript IO",              "jsio/page.html", null
)

<script language=javascript>
  writeSelectMenu("MenuArray");
</script>

For example, the first select menu on the Javascript and Perl Paradigms page is generated with the code,

<script language=javascript>
  writeSelectMenu("JSbyDate");
</script>