Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I create multi-level select / list / drop down boxes?

dynamic listboxes !

How do I create multi-level select / list / drop down boxes?

by  BillyRayPreachersSon  Posted    (Edited  )
Here is some code to enable you to create multi-level select elements.

See below for browser compatibility matrix.

The code also shows how you can customise a default option in each select element easily.

Note: There are many different ways this could be achieved... so if this method isn't right for you, don't give up. You could consider using nested arrays, objects, etc.

Note 2: If the page is for public consumption, be a considerate programmer and include a non JavaScript-based server-side alternative for when JS is disabled ;-)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Dynamic select elements</title>

	<style type="text/css">
		html, body, form {
			padding: 0px;
			margin: 0px;
		}
		body {
			margin: 1em;
			font-family: Verdana, Arial, Helvetica, sans-serif;
		}
	</style>

	<script type="text/javascript">
	<!--

		function loadSelectElement(selObjId, options) {
			var selObj = document.getElementById(selObjId);

			// clear the target select element apart from the "select your..." option
            selObj.options.length = 1;

            // copy options from array of [value, pair] arrays to select box
			// IE doesn't work if you use the DOM-standard method, however...
			if (typeof(window.clientInformation) != 'undefined') {
				// IE doesn't take the second "before" parameter...
	            for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
			} else {
	            for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
            }
		}

		function madeSelection(selObj) {
			var selectedValue = selObj.options[selObj.selectedIndex].value;
			var selectedText = selObj.options[selObj.selectedIndex].text;
			if (selectedValue == '--') return;

			if (selObj.name == 'select01') {
				document.getElementById('select02Container').style.display = 'block';
				document.getElementById('select02').options[0].text = 'Select the breed of your ' + selectedText.toLowerCase();

				switch(selectedValue) {
					case 'type_cat':
						loadSelectElement('select02', [
							['breed_persian', 'Persian'],
							['breed_tabby', 'Tabby'],
							['breed_siamese', 'Siamese']
						]);
						return;

					case 'type_dog':
						loadSelectElement('select02', [
							['breed_alsatian', 'Alsatian'],
							['breed_springer_spaniel', 'Springer Spaniel'],
							['breed_king_charles_spaniel', 'King Charles Spaniel'],
							['breed_chihuahua', 'Chihuahua'],
							['breed_shih_tzu', 'Shih Tzu']
						]);
						return;

					case 'type_bird':
						loadSelectElement('select02', [
							['breed_parrot', 'Parrot'],
							['breed_cock', 'Cock']
						]);
						return;

					case 'type_fish':
						loadSelectElement('select02', [
							['breed_goldfish', 'Goldfish']
						]);
						return;
				}
			} // select01

			if (selObj.name == 'select02') {
				document.getElementById('select03Container').style.display = 'block';
				document.getElementById('select03').options[0].text = 'Select the colour of your ' + selectedText;

				switch(selectedValue) {
					case 'breed_persian':
					case 'breed_siamese':
						loadSelectElement('select03', [
							['colour_white', 'White'],
							['colour_grey', 'Grey'],
							['colour_blue', 'Blue']
						]);
						return;

					case 'breed_tabby':
						loadSelectElement('select03', [
							['colour_tabby', 'Tabby']
						]);
						return;

					case 'breed_alsatian':
					case 'breed_springer_spaniel':
					case 'breed_king_charles_spaniel':
					case 'breed_chihuahua':
					case 'breed_shih_tzu':
						loadSelectElement('select03', [
							['colour_brown', 'Brown'],
							['colour_white', 'White'],
							['colour_golden', 'Golden']
						]);
						return;


					case 'breed_parrot':
						loadSelectElement('select03', [
							['colour_white', 'White'],
							['colour_yellow', 'Yellow'],
							['colour_red_yellow', 'Red & Yellow']
						]);
						return;

					case 'breed_cock':
						loadSelectElement('select03', [
							['colour_white', 'White'],
							['colour_brown', 'Brown']
						]);
						return;

					case 'breed_goldfish':
						loadSelectElement('select03', [
							['colour_orange', 'Orange']
						]);
						return;

				}
			} // select02
		}

	//-->
	</script>
</head>

<body>
	<form name="myForm">
		<select name="select01" id="select01" onchange="madeSelection(this);">
			<option value="--">Select your pet type</option>
			<option value="type_cat">Cat</option>
			<option value="type_dog">Dog</option>
			<option value="type_bird">Bird</option>
			<option value="type_fish">Fish</option>
		</select>

		<div id="select02Container" style="margin-top:1em; display:none;">
			<select name="select02" id="select02" onchange="madeSelection(this);">
				<option value="--">Select your pet breed</option>
			</select>
		</div>

		<div id="select03Container" style="margin-top:1em; display:none;">
			<select name="select03" id="select03" onchange="madeSelection(this);">
				<option value="--">Select your pet colour</option>
			</select>
		</div>
	</form>
</body>
</html>


This has been tested working in:

Windows
IE 7 Beta 2
IE 6
IE 5.5
IE 5.0
Netscape 7.1
Fx 1.5.0.3
Opera 8.52
Opera 7.54
Opera 7.02

Mac OS X 10.4.6
Safari 2.0.3
IE 5.2.3
FX 1.0.7
Fx 1.5.0.2
Opera 7.54u1
Opera 8.02
Opera 8.54
Netscape 7.1
Camino 1.0

It is known to NOT work in Opera 6.03 for Mac OS X

It should work in most modern DOM-compliant browsers, however.


Dan


[link http://www.coedit.co.uk/][color #00486F]Coedit Limited[/color][/link][color #000000] - Delivering standards compliant, accessible web solutions[/color]

[tt]Dan's Page [blue]@[/blue] Code Couch
http://www.codecouch.com/dan/[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top