Javascript linked option menu
Firstly, create the number of linked menus you require. This example will use two.
<select name="List1" id="List1" onchange="make(this)">
</select>
<select name="List2" id="List2" onchange="nav(this)">
<option>Select an option</option>
</select>The first list will be created dynamically and when a menu item is selected, a new menu will be created in the second list.
Creating the links
We will use arrays to hold all the menu items.
var option = new Array();
//First Menu
option[0] = new Array();
option[0][0] = new Array('#','Select an option');
option[0][1] = new Array('1','Page 1');
option[0][2] = new Array('2','Page 2');
option[0][3] = new Array('3','Page 3');
//Second Menu 2 - Selection from page 1
option[1] = new Array();
option[1][0] = new Array('#','Select an option');
option[1][1] = new Array('page1a.html','Page 1a');
option[1][2] = new Array('page2a.html','Page 2a');
option[1][3] = new Array('page3a.html','Page 3a');
//Second Menu 3 - Selection from page 2
option[2] = new Array();
option[2][0] = new Array('#','Select an option');
option[2][1] = new Array('page1b.html','Page 1b');
option[2][2] = new Array('page2b.html','Page 2b');
option[2][3] = new Array('page3b.html','Page 3b');
//Second Menu 4 - Selection from page 3
option[3] = new Array();
option[3][0] = new Array('#','Select an option');
option[3][1] = new Array('page1c.html','Page 1c')
option[3][2] = new Array('page2c.html','Page 2c');
option[3][3] = new Array('page3c.html','Page 3c');This array holds three menus. The first is the static menu that will not change, the other three will be loaded in the second list after the user selects a menu item in the first.
function make_list(list,num)
{
if(num != '#'){
remove_all(list);
var fragment = document.createDocumentFragment();
var list = document.getElementById(list);
for(i=0;i < option[num].length;i++)
{
var new_option = document.createElement('option');
var text = document.createTextNode(option[num][i][1]);
new_option.appendChild(text);
new_option.setAttribute('value',option[num][i][0]);
fragment.appendChild(new_option);
}
list.appendChild(fragment);
}
}This script has two parameters list and num. List is the id of the second list, and num is the menu to load into the second list. This code first checks to see if num is a number (this allows the menu to begin with ‘Select an option’). The code then creates a document fragment, creates the menus and adds them to the list.
function remove_all(list)
{
var list = document.getElementById(list);
while(list.length > 0)
{
list.remove(0);
}
}This function removes all the options from the second menu so that the new menu can be added.
function make(list)
{
var list_value = list.options[list.selectedIndex].value;
make_list('List2',list_value);
}The value of the first menu is passed to create the second.
function nav(list)
{
var new_href = list.options[list.selectedIndex].value;
location.href = new_href;
}This final section of code redirects the user to a new page.
Loading the menu
We finally need to build the first menu when the page loads.
<body onload="make_list('List1',0)">