This script is used to connect two form select list objects to provide a single navigation link. In the example, one select list is used to choose a country and the other to choose a sport. Depending upon the combination of country-sport selected, clicking the Go button will take you to a different web site.

Place the following code in a custom header:

<script type="text/javascript">
<!--
// Script written by www.hereforlife.com
// Contact information - webmaster@hereforlife.com
// Provided by: www.javafile.com

// List1 is the 2-dimensional array used to hold the links corresponding to
// the two select lists. Element[0] of the array is ignored so that the array
// and select list indices match.

LIST1 = new Array();

// Fill the arrays with link values. LIST1[1][x] corresponds to the first select list
// (Canada) and LIST1[2][x] corresponds to the second select list (US).

LIST1[1] = new Array();
LIST1[1][1] = "http://www.bluejays.ca";
LIST1[1][2] = "http://www.nba.com/raptors";
LIST1[1][3] = "http://www.argonauts.on.ca";
LIST1[1][4] = "http://www.TorontoMapleLeafs.com";
LIST1[2] = new Array();
LIST1[2][1] = "http://www.baseball.com";
LIST1[2][2] = "http://www.nba.com/teamindex.html";
LIST1[2][3] = "http://www.nfl.com";
LIST1[2][4] = "http://www.nhl.com";

// The following function ensure the two select list have valid values
// and links to the desired web site. If either list does not have a
// valid selection value, an alert message is displayed and focus returns
// to the offending select list.
//
// In this example, the form is named "links", the first select list is named
// "country", and the second select list is named "sport".

function checkEm() {
  if (document.links.country.selectedIndex == 0) {
    alert("Please select a Country.");
    document.links.country.focus();
    return false;
  }
  if (document.links.sport.selectedIndex == 0) {
    alert("Please select a sport.");
    document.links.sport.focus();
    return false;
  }

  // If there is a valid selection, open it in a new window.
  window.open(LIST1[document.links.country.selectedIndex][document.links.sport.selectedIndex]);
  return false;
}
// -->
</script>

How the script works

In a form select list, the options are maintained as Name-Value pairs, where the Name is what the user sees in the list and the Value is some data that is used or passed to another script. Using this script, it does not matter what values are used in the select list as the real values are contained in the script within an array.

In the following diagram, the Country select list contains a "Select" message and two countries, and the Sport select list contains a "Select" message and four sport categories.

In the script, there is an array named LIST1 which has two dimensions [a] and [b]. The [a] dimension corresponds to the Country select list and the [b] dimension corresponds to the Sport select list. The script is only concerned with the position number (or index) of the items. By using the select list index numbers, a reference point can be created to locate the desired value stored in the array.

For example, if you choose "US" in the Country select list, and "Football" in the Sport select list, the combined indices gives you a location in the array of LIST1[2][3]. The value assigned to this location can then be obtained and used to navigate to a new page or site. The two select list [0] indices are not used within the array since these contain the "Select" messages and are used by the script to detect a valid selection.

Modify the LIST1 array values to the URLs you need, based on the index values on your select lists.

Using the script

Place your two select lists on the work page and fill in the names you want to appear in each list. Remember that the first name position corresponds to array position [0] and is unused. Use this position to display an appropriate message.

Next place a form button on the page and in the Code field, enter:

onClick="checkEm();return false;"

When the button is clicked, the script’s checkEm() function will execute which will check that a valid selection has been made with the two lists and will open the URL coded in the script.