Jump Menus

Contact Us or call 1-877-932-8228
Jump Menus

Jump Menus

A jump menu is a select menu that contains a list of websites or pages to visit. There are two main types of jump menus. One jumps to the selected page as soon as the user makes a selection. The other jumps to a page only after the user has made a selection and clicked on a "Go" button. We'll look at the latter type first and then create the former type in an exercise.

Code Sample:

DynamicForms/Demos/JumpMenus.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
function jumpMenu(e) {
	var btn = getTarget(e);
	var select = btn.form.state;
	var i = select.selectedIndex;
	var selection = select.options[i].value;
	var url;
	if (i === 0) {
		alert("Please select a state.");
	} else {
		url = "http://www.50states.com/" + selection + ".htm";
		location.href = url;
	}
}

observeEvent(window,"load",function() {
		var btn = document.getElementById("stbtn");
		observeEvent(btn,"click",jumpMenu);
	}
);
</script>
</head>
<body>
<form action="">
	<select name="state" id="state">
		<option value="0">--SELECT A STATE--</option>
		<option value="alabama">Alabama</option>

---- C O D E   O M I T T E D ----

	</select>
	<input id="stbtn" name="stbtn" type="button" value="GO">
</form>
</body>
</html>

Viewed in a browser, the page looks like this:

The options[] Collection

Select menus contain a collection of options. Collections, like arrays, are base 0, meaning the first item has an index of 0. So, in this example, the first option, which reads "--SELECT A STATE--" is option 0.

The selectedIndex Property

Select menus have a selectedIndex property that holds the index of the currently selected option. For example, in the sample above, if North Carolina is selected, state.selectedIndex would hold 5. To see if the first option of a select menu is selected, check if selectedIndex is 0.

Let's look at the code above in detail.

  1. The "GO" button has an event listener so that the jumpMenu() function is called when the user clicks it.
  2. The jumpMenu() function does the following:
    1. Gets the target of the click event so that it can identify the select menu.
    2. Creates the variable i that holds the selectedIndex property of the select menu.
    3. Creates the variable selection that holds the value of the selected option.
    4. Checks to see if the first option is selected.
      • If it is, the function alerts the user to select an option.
      • If it is not, the function determines the destination page based on selection, assigns that value to the url variable, and loads that page by changing the href property of the location object to url.

Disabling Form Elements

As we have seen, form elements can be disabled by setting the element's disabled property to true. They can be re-enabled by setting the disabled property to false.

formElement.disabled = true;
formElement.disabled = false;

The example below is a modified version of the jump menu that disables the "GO" button unless a state is selected.

Code Sample:

DynamicForms/Demos/JumpMenus2.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
function jumpMenu(e) {
		var btn = getTarget(e);
		var select = btn.form.state;
		var i = select.selectedIndex;
		var selection = select.options[i].value;
		var url = "http://www.50states.com/" + selection + ".htm";
		location.href = url;
	}
	
	function toggleButton(e) {
		var select = getTarget(e);
		var btn = select.form.stbtn;
		if (select.selectedIndex === 0) {
			btn.disabled = true;
		} else {
			btn.disabled = false;
		}
	}
	
	observeEvent(window,"load",function() {
			var btn = document.getElementById("stbtn");
			observeEvent(btn,"click",jumpMenu);
			btn.disabled = true;
			var stateSel = document.getElementById("state");
			observeEvent(stateSel,"change",toggleButton);
		}
	);
</script>
---- C O D E   O M I T T E D ----

Notice that the jumpMenu() function no longer checks if a state has been selected. It is only called when the user clicks the "Go" button, which is only enabled if a state is selected.

Next