The JavaScript Source: Forms : Unobtrusive Dynamic Select Boxes

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Use this script to produce select boxes that relate to one another. Choose an option in the first box and the script will change the available choices in the second box to match your selection. Easy to use, with comments.

Notes

Created by: Bobby van der Sluis
Web Site: http://www.bobbyvandersluis.com/
Posted: May 23, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: unobtrusiveDSBoxes.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Bobby van der Sluis | http://www.bobbyvandersluis.com/ */
// Details can be found at:
// http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect.php

function dynamicSelect(id1, id2) {
 	// Feature test to see if there is enough W3C DOM support
 	if (document.getElementById && document.getElementsByTagName) {
  		// Obtain references to both select boxes
  		var sel1 = document.getElementById(id1);
  		var sel2 = document.getElementById(id2);
  		// Clone the dynamic select box
  		var clone = sel2.cloneNode(true);
  		// Obtain references to all cloned options
  		var clonedOptions = clone.getElementsByTagName("option");
  		// Onload init: call a generic function to display the related options in the dynamic select box
  		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
  		sel1.onchange = function() {
   			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
  		};
 	}
}

function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
 	// Delete all options of the dynamic select box
 	while (sel2.options.length) {
  		sel2.remove(0);
 	}
 	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
 	var pattern1 = /( |^)(select)( |$)/;
 	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
 	// Iterate through all cloned options
 	for (var i = 0; i < clonedOptions.length; i++) {
  		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
  		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
 	 		 // Clone the option from the hidden option pool and append it to the dynamic select box
  		 	sel2.appendChild(clonedOptions[i].cloneNode(true));
  		}
 	}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

// addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
dynamicSelect("pda-brand", "pda-type");
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="unobtrusiveDSBoxes.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form>
		<div>
				<select id="pda-brand">
 					<option value="select">Select PDA brand...</option>
 					<option value="dell">Dell</option>
 					<option value="hp">HP</option>
 					<option value="palmone">PalmOne</option>
				</select>

				<select id="pda-type">
 					<option class="select" value="select">Select PDA type...</option>
 					<option class="dell" value="aximx30">Axim X30</option>
 					<option class="dell" value="aximx50">Axim X50</option>
 					<option class="hp" value="ipaqhx2750">iPAQ hx2750</option>
 					<option class="hp" value="ipaqrx3715">iPAQ rx3715</option>
 					<option class="hp" value="ipaqrz1710">iPAQ rz1710</option>
 					<option class="palmone" value="tungstene2">Tungsten E2</option>
 					<option class="palmone" value="tungstent5">Tungsten T5</option>
 					<option class="palmone" value="zire72">Zire 72</option>
				</select>
		</div>
</form>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

6. From: tika
Correction!
01/23/2008 06:44:45

3. From: Cindee
Thanks!
08/24/2007 21:36:22

2. From: Larry
Thank you!
08/03/2007 01:14:22

1. From: Renfield
How to make navigable
06/11/2007 12:34:27

4. From: Jono
Auto Navigate
08/31/2007 08:56:59

5. From: Lee (Admin)
10/03/2007 15:26:47

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

6. From: tikaCorrection!01/23/2008 06:44:45

3. From: CindeeThanks!08/24/2007 21:36:22

2. From: LarryThank you!08/03/2007 01:14:22

1. From: RenfieldHow to make navigable06/11/2007 12:34:27

4. From: JonoAuto Navigate08/31/2007 08:56:59

5. From: Lee (Admin)10/03/2007 15:26:47

6. From: tika
Correction!
01/23/2008 06:44:45

3. From: Cindee
Thanks!
08/24/2007 21:36:22

2. From: Larry
Thank you!
08/03/2007 01:14:22

1. From: Renfield
How to make navigable
06/11/2007 12:34:27

4. From: Jono
Auto Navigate
08/31/2007 08:56:59

5. From: Lee (Admin)
10/03/2007 15:26:47