LDML Ltd: Downloads

Popup3 is an example of a conditional pop-up menu implementation — a simple JavaScript routine which populates the second and third pop-up menus dependent upon the earlier selection:
Usage

To use this JavaScript in your own solution, copy the code from the text field below and modify as appropriate.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<meta name="generator" content="Adobe GoLive 6">
		<title>LDML JavaScript Sampler</title>
		<script type="text/javascript" language="JavaScript1.2"><!--
/*
This sample script copyright LDML Ltd <http://www.ldml.com/>
Adaptation and redistribution allowed as long as "LDML Ltd <http://www.ldml.com/>" included as a credit in code
Sample provided as is
*/

//Change this array to show your menu items.
//Each item has its own string in the form of "<menu1item>|<menu2item>|menu3item>"
var theArray = new Array("Gary|Beth|Corey","Gary|Beth|John","Gary|Ben|Luke","Gary|Ben|Leia","George|Steven|Sam","George|Steven|Rebecca","George|Nat|Travis","George|Nat|Kirk");

function BuildPopup(ordinal){
	var tempItem = "";
	var thePopupObjs = new Array();
	var thePopup = document.forms[0]["PopUp" + ordinal];
	//Check the selected item has a value associated with it
	//If it does, create items for the next popup
	if (ordinal == 0 || document.forms[0]["PopUp" + (ordinal - 1)].value.length > 0){
		thePopup.length = 0;
		thePopupObjs[0] = new Option("- Select -", "");
		for(var i=0;i<theArray.length;i++){
			var tempArray = theArray[i].split('|');
			if (ordinal == 0 && tempArray[0] != tempItem){
				thePopupObjs[thePopupObjs.length] = new Option(tempArray[0], tempArray[0]);
				tempItem = tempArray[0];
			} else if (ordinal == 1 && tempArray[0] == document.forms[0].PopUp0.value && tempArray[1] != tempItem){
				thePopupObjs[thePopupObjs.length] = new Option(tempArray[1], tempArray[1]);
				tempItem = tempArray[1];
			} else if (ordinal == 2 && tempArray[0] == document.forms[0].PopUp0.value && tempArray[1] == document.forms[0].PopUp1.value && tempArray[2] != tempItem){
				thePopupObjs[thePopupObjs.length] = new Option(tempArray[2], tempArray[2]);
				tempItem = tempArray[1];
			}
		}
	}
	//Populate the next popup
	for(var i=0;i<thePopupObjs.length;i++)
		thePopup.options[i] = thePopupObjs[i];
	//Reset PopUps
	if (ordinal == 0){
		document.forms[0].PopUp1.length = 0;
		document.forms[0].PopUp1.options[0] = new Option("Wait", "")
		document.forms[0].PopUp2.length = 0;
		document.forms[0].PopUp2.options[0] = new Option("Wait", "")
	} else if (ordinal == 1){
		if (document.forms[0].PopUp0.value.length == 0){
			document.forms[0].PopUp1.length = 0;
			document.forms[0].PopUp1.options[0] = new Option("Wait", "")
		}	
		document.forms[0].PopUp2.length = 0;
		document.forms[0].PopUp2.options[0] = new Option("Wait", "")
	} else if (ordinal == 2 && document.forms[0].PopUp1.value.length == 0){
		document.forms[0].PopUp2.length = 0;
		document.forms[0].PopUp2.options[0] = new Option("Wait", "")
	}
}
// -->
</script>
	</head>

	<body bgcolor="#ffffff" onLoad="BuildPopup(0);">
		<form action="#" method="post" name="TheForm">
			<select name="PopUp0" size="1" onChange="BuildPopup(1);">
				<option value="">- Select -</option>
			</select>
			<p><select name="PopUp1" size="1" onChange="BuildPopup(2);">
					<option value="">Wait</option>
				</select></p>
			<p><select name="PopUp2" size="1">
					<option value="one">Wait</option>
				</select></p>
		</form>
		<p></p>
	</body>

</html>