Unobtrusive Dynamic Select Boxes

Bobby Sluis May 23, 2007

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://www.javascriptsource.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>

Leave a Response

(6 comments)

The previous comment I send is not correct!!![br /]This code works perfectly.[br /]Thanks!!

tika Jan 23, 2008

Excellent idea, Jono! Works great!

Lee Oct 3, 2007

1. Set your options for the first box[br /]2. For the second box, where you would normally have the <select id="pda-type"> CHANGE IT TO THIS:[br /]<select id="pda=type" onchange="window.open(this.options[this.selectedIndex].value,'_top')">[br /][br /]3. For each of your options in the second box:[br /]<option value="YOUR URL">OPTION NAME</option>[br /][br /]Then when the user selects their second option it will automatically navigate to the value you gave.

Jono Aug 31, 2007

I looked for hours trying to find a script that would help condense my drop drop boxes. This script is a dream come true! It works equally well on Explorer, Nescape and Mozilla. Well done![br /][br /]Cindee

Cindee Aug 24, 2007

I looked at a lot of js script for dependent drop downs, but they were all too complicated to understand. Thanks for this script and for keeping it simple. Using the class attibute was a great idea![br /]-- Larry

Larry Aug 2, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details