2 dynamic select boxes

Hey,
the [URL=”http://javascript.internet.com/forms/unobtrusive-dynamic-select-boxes.html”]unobtrusive dynamic select boxes[/URL] are working great.

I just wonder if its possible make this script into 2 dynamic select boxes.

Like make this script work with 2 dynamic selex boxed, I did try to enter a 3rd ID but dident get it to work.

[code=php]/* 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”);
});[/code]

And this is the select boxes I want it to work on

[code=php]<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>

<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>[/code]

Anyone know if this is possible or if its any other javascripts out thats allready made and can do it?

Right now the 3rd select box works like it isent dynamic.

Also in #JavaScript _↴