Creating Cascading Select Menus - Exercise

Contact Us or call 1-877-932-8228
Creating Cascading Select Menus - Exercise

Creating Cascading Select Menus

Duration: 20 to 30 minutes.

In this exercise, you will modify DynamicForms/Exercises/cascading.html, so that when a rock band is selected from the first menu, the second menu provides a list of artists in that band. The bands and artists are shown below:

  • Beatles
    • Paul McCartney
    • John Lennon
    • George Harrison
    • Ringo Starr
  • Rolling Stones
    • Mick Jagger
    • Keith Richards
    • Charlie Watts
    • Bill Wyman
  • Genesis
    • Phil Collins
    • Peter Gabriel
    • Mike Rutherford
  • Eagles
    • Don Henley
    • Joe Walsh
    • Glenn Frey
  1. Open DynamicForms/Exercises/cascading.html for editing.
  2. Write code so that after the page loads, change events on the rockbands select menu cause the artist menus options to be updated appropriately.

Code Sample:

DynamicForms/Exercises/cascading.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Cascading Select Menus</title>
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	function selChanged(sel,arr,dependentSel) {
		var selection = sel.options[sel.selectedIndex].value;
		var arrOptions = arr[selection];
		var opt;
		dependentSel.options.length = 0;
		for (var i in arrOptions) {
			opt = new Option(arrOptions[i]);
			appendOptionToSelect(dependentSel,opt);
		}
	}
	
	/*
		Beatles
			- Paul McCartney, John Lennon, George Harrison, Ringo Starr
		Rolling Stones
			- Mick Jagger, Keith Richards, Charlie Watts, Bill Wyman
		Genesis
			- Phil Collins, Peter Gabriel, Mike Rutherford
		Eagles
			- Don Henley, Joe Walsh, Glenn Frey
	*/
</script>	
</head>
<body>
<form name="Menus">
	<label for="band">Band:</label>
	<select id="band" name="band">
		<option value="">Please select</option>
		<option value="beatles">Beatles</option>
		<option value="stones">Rolling Stones</option>
		<option value="genesis">Genesis</option>
		<option value="eagles">Eagles</option>
	</select>
	<label for="artist">Artist:</label>
	<select id="artist"></select>
</form>
</body>
</html>

Challenge

Using the rockBands object in the provided rockBands.js file, further modify the code such that when an option is selected from the artist select menu, the page redirects to the corresponding URL for that artist.

Code Sample:

DynamicForms/Exercises/rockBands.js
var rockBands = {
	"beatles" : [
		{
			"name" : "Paul McCartney",
			"value" : "http://www.paulmccartney.com"
		},
		{
			"name" : "John Lennon",
			"value" : "http://www.johnlennon.it"
			
		},
		{
			"name" : "George Harrison",
			"value" : "http://www.georgeharrison.com"
		},
		{
			"name" : "Ringo Starr",
			"value" : "http://www.ringostarr.com"
		}
	],
	"stones" : [
		{
			"name" : "Mick Jagger",
			"value" : "http://www.mickjagger.com"
		},
		{
			"name" : "Keith Richards",
			"value" : "http://www.keithrichards.com"
		},
		{
			"name" : "Charlie Watts",
			"value" : "http://www.rosebudus.com/watts"
		},
		{
			"name" : "Bill Wyman",
			"value" : "http://www.billwyman.com"
		}
	],
	"genesis" : [
		{
			"name" : "Phil Collins",
			"value" : "http://www.philcollins.co.uk"
		},
		{
			"name" : "Peter Gabriel",
			"value" : "http://www.petergabriel.com"
			
		},
		{
			"name" : "Mike Rutherford",
			"value" : "http://www.mike-and-the-mechanics.co.uk"
		}
	],
	"eagles" : [
		{
			"name" : "Don Henley",
			"value" : "http://www.donhenley.com"
		},
		{
			"name" : "Joe Walsh",
			"value" : "http://www.joewalsh.com"
			
		},
		{
			"name" : "Glenn Frey",
			"value" : "http://www.imdb.com/name/nm0004940"
		}
	]
};

Solution:

DynamicForms/Solutions/cascading.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
	function selChanged(sel,data,dependentSel) {
		var selection = sel.options[sel.selectedIndex].value;
		var arrOptions = data[selection];
		var opt;
		dependentSel.options.length = 0;
		for (var i in arrOptions) {
			opt = new Option(arrOptions[i]);
			appendOptionToSelect(dependentSel,opt);
		}
	}
	
	observeEvent(window,"load",function() {
		var rockBands = {
			"beatles" : ["Paul McCartney", "John Lennon", "George Harrison", "Ringo Starr"],
			"stones" : ["Mick Jagger", "Keith Richards", "Charlie Watts", "Bill Wyman"],
			"genesis" : ["Phil Collins", "Peter Gabriel", "Mike Rutherford"],
			"eagles" : ["Don Henley", "Joe Walsh", "Glenn Frey"]
		};
		var band = document.getElementById("band");
		var artist = document.getElementById("artist");
		observeEvent(band,"change",function() {
			selChanged(band,rockBands,artist);	
		});
	});
</script>

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

Challenge Solution:

DynamicForms/Solutions/cascading-challenge.html
---- C O D E   O M I T T E D ----

<script type="text/javascript" src="rockbands.js"></script>
<script type="text/javascript">
	/*
	* function triggers when the select menu option changes
	* Param sel refers to the select menu itself, in this case: "band"
	* Param data refers to the data being used, in this case: the roackband object in rockband.js
	* Param dependentSel refers to the secondary select menu, in this case: "artist"
	*/
	function selChanged(sel,data,dependentSel) {
		//get the selected band
		var selection = sel.options[sel.selectedIndex].value;
		//get the corresponding artists array based on the band selected
		var arrOptions = data[selection];
		var opt;
		dependentSel.options.length = 0;
		/*
		* let's added the options to the secondary select menu (the artists).
		* notice the appendOptionToSelect() function from lib.js
		* 1st we add a "Plese Select" option
		* then we loop the arrOptions, adding the option on each iteration
		*/
		appendOptionToSelect(dependentSel,new Option("Please select",""));
		for (var i in arrOptions) {
			opt = new Option(arrOptions[i].name,arrOptions[i].value);
			appendOptionToSelect(dependentSel,opt);
		}
		//add the "on change" event listener to the newly populated "artists" select menu
		observeEvent(dependentSel,"change",function() {		
			var i = dependentSel.selectedIndex;
			//if the selected index in the "artists" menu is grater than 0, so is not "Please select", then...
			if (i > 0) {
				/*
				* location.href redirects the page to the URL given.
				* the url to redirect to is gathered from the rockband object. 
				* Notice the "value" property here, which refers to the "value" property in the different 
				  objects in rockbands.js
				*/
				location.href=dependentSel.options[dependentSel.selectedIndex].value;
			}
		});
	}
	
	observeEvent(window,"load",function() {
		var band = document.getElementById("band");
		var artist = document.getElementById("artist");
		observeEvent(band,"change",function() {
			selChanged(band,rockBands,artist);	
		});
	});
</script>

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