// for each array element created above
// create a new array of unspecified length for that array element
for (i = 0; i < groups; i++) group[i] = new Array();

// Option Objects can be created dynamically with the Option() constructor
// new Option(text, value, defaultSelected, selected)
// Option reference link
group[0][0] = new Option("CNET", "http://www.cnet.com");
group[0][1] = new Option("News.com", "http://www.news.com");
group[0][2] = new Option("Wired News", "http://www.wired.com");

group[1][0] = new Option("CNN", "http://www.cnn.com");
group[1][1] = new Option("ABC News", "http://www.abcnews.com");

group[2][0] = new Option("Hotbot", "http://www.hotbot.com");
group[2][1] = new Option("Infoseek", "http://www.infoseek.com");
group[2][2] = new Option("Excite", "http://www.excite.com");
group[2][3] = new Option("Lycos", "http://www.lycos.com");

var Links = form.links; // create a temporary "links" shortcut

function redirect(index) {
     // "null out" all the options associated with the links menus
     for (m = Links.options.length - 1; m > 0; m--) Links.options[m] = null;
     // fill up the links options with the appropriate text & values from the above 2D arrays
     for (i = 0; i < group[index].length; i++) {
          Links.options[i] = new Option(group[index][i].text, group[index][i].value);
     }
     // make the first links option the selected item
     Links.options[0].selected = true;
}

function go2() {
     location.href = Links.options[Links.selectedIndex].value
}

Configuring the script: The first thing you'll need to do is change the contents of the first selection list to reflect the "main categories" you'll want to use. Below shows the code pertaining to that:

<FORM NAME="dualmenus">

<SELECT NAME="sites" onChange="redirect(this.selectedIndex);">
     <OPTION>Technology Sites
     <OPTION>News Sites
     <OPTION>Search Engines
</SELECT>

Change the text in read, add in more <OPTION> tags etc.

Next, you need to define (using HTML) the links associated with the first category. The code for this looks like this:

<SELECT NAME="links">
     <OPTION VALUE="http://www.cnet.com">CNET
     <OPTION VALUE="http://www.news.com">News.com
     <OPTION VALUE="http://www.wired.com">Wired News
</SELECT>

<INPUT TYPE="button" VALUE="Go!" onClick="go2();">

</FORM>

Change those to reflect the links associated with your first category. Add in more <OPTION> tags if necessary.

In the demo above, we know that it contains three categories, the first one with three links, the second one with 2 links, and the third with 4 links. These links are contained as two dimensional array elements:

//group 1
group[0][0] = new Option("CNET", "http://www.cnet.com")
group[0][1] = new Option("News.com", "http://www.news.com")
group[0][2] = new Option("Wired News", "http://www.wired.com")

//group 2
group[1][0] = new Option("CNN", "http://www.cnn.com")
group[1][1] = new Option("ABC News", "http://www.abcnews.com")

//group 3
group[2][0] = new Option("Hotbot", "http://www.hotbot.com")
group[2][1] = new Option("Infoseek", "http://www.infoseek.com")
group[2][2] = new Option("Excite", "http://www.excite.com")
group[2][3] = new Option("Lycos", "http://www.lycos.com")

The text in red represent the text of each selection, and its associated URL, respectively. Since we have three categories in our demo, we have three groups of link. Obviously, your combo will not necessarily follow this structure, so its important to know how to set up the variables accordingly.

group[0][0] = new Option("JavaScript Site", "http://www.JavaScript.com")

The blue 0 indicates which category the variable belong to (0 = first, 1 = second etc), and the red 0 indicates the variable's position within the category.