« »

Let use this multiple select script if you want to create select boxes that relate to anothers, by onchange event. Choose a value in the first select options and the script will precess and display the available select values in the second box to match your selection automatically. Easy to use, with full comments in source code.

You can also see more for multiple select, dynamic dropdown,...

Label: smarter, dynamic, select, option, onchange, multiple select, select option, select value, dynamic dropdown

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">
// 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");
});
</script>

Copy All x2

<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>

Comment (2)
Write

by DÆ°Æ¡ng Mai ThÃ nh, 28/07/2010 04:07 PM
thank Reply

This script really Smarter & Dynamic

by Martin, 08/08/2010 02:08 PM
Nice Guys Reply

Thank you for posting this great blog. The subject is intriguing to me. I hope you post more about it soon. It gave me good deeper insight.

Smarter Dynamic Select Options

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

18/04/2009
Bobby van der Sluis [more]
3,939
2
3
0
5.81 KBytes

JavaScript Smarter Dynamic Select Options

4/5 3 votes / 3,939 previews / 2 comment 18/04/2009 Let use this multiple select script if you want to create select boxes that rel...JavaScript Smarter Dynamic Select Options - Smarter Dynamic Select Options

mynguyen203[2] haiht ntt382 bigbabyit tuaninfo3008 mylove8105[3] tyuiop27[2] caoanh89 vlngu maivinhdalat