[thelist] dynamic selects with JavaScript

[Canfield, Joel]

I'm using the method demonstrated here for three dynamic selects:

http://www.bobbyvandersluis.com/articles/unobtrusivedynamicselect/unobtr
usivedynamicselect_ex4.html

and have one issue (my JavaScript, never impressive, is even rustier
now)

I'm building the options from a db for an intranet form. Each of the
three 'selects' displays the current value from the db, and the drop
down shows all other possible options.

When the first select is changed, the second changes all its options, as
expected. But the third doesn't change, I assume because the second's
value was changed programmatically, not by user action. When the first
select is changed, the cascade should be that the second is changed to
whatever available choices are, and the third should be changed to
whatever the available choices are from the second select.

Here's the full content of the js file:

function dynamicSelect(id1, id2) {
	if (document.getElementById && document.getElementsByTagName) {
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		var clone = sel2.cloneNode(true);
		var clonedOptions =
clone.getElementsByTagName("option");
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2,
clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	while (sel2.options.length) {
		sel2.remove(0);
	}
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" +
	   sel1.options[sel1.selectedIndex].value + ")( |$)");
	for (var i = 0; i < clonedOptions.length; i++) {
		if (clonedOptions[i].className.match(pattern1) ||
		   clonedOptions[i].className.match(pattern2)) {
	
sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}
window.onload = function() {
	dynamicSelect("TYPE", "WOTYPE2");
	dynamicSelect("WOTYPE2", "WOTYPE3");
}

and here's an abbreviated version of how it looks when the page is
rendered:

<select name="TYPE" id="TYPE" class="updformfield">
	<option value="Carrier_Issues">Carrier Issues</option>
	<option value="Email">Email</option>
	<option value="PX2">PX2</option>
	<option value="Repairs_and_Maintenance">Repairs and
Maintenance</option>
	<option value="Server">Server</option>
</select>

<select name="WOTYPE2" id="WOTYPE2" class="updformfield">
	<option class="Carrier_Issues"
value="Change_not_processed">Change not processed</option>
	<option class="Carrier_Issues" value="Escalated_Issue">Escalated
Issue</option>
	<option class="Carrier_Issues"
value="Exception_Request">Exception Request</option>
	<option class="PX2" value="Other_PX2">Other PX2</option>
	<option class="PX2" value="P_Code_Defect">P Code Defect</option>
	<option class="PX2" value="P_Enhancement">P Enhancement</option>
	<option class="Repairs_and_Maintenance"
value="Carpet_and_flooring">Carpet and flooring</option>
	<option class="Repairs_and_Maintenance"
value="Furniture_and_cubicles">Furniture and cubicles</option>
	<option class="Repairs_and_Maintenance"
value="Kitchen_equipment">Kitchen equipment</option>
	<option class="Server" value="Production">Production</option>
	<option class="Server" value="Staging">Staging</option>
	<option class="Server" value="Testing">Testing</option>
</select>

<select name="WOTYPE3" id="WOTYPE3" class="updformfield">
	<option class="P_Code_Defect" value="CM_Other">CM Other</option>
	<option class="P_Code_Defect" value="CM_Rate_Admin">CM Rate
Admin</option>
	<option class="P_Code_Defect" value="EN_Add_On">EN Add
On</option>
	<option class="P_Enhancement" value="CM_Other">CM Other</option>
	<option class="P_Enhancement" value="CM_Rate_Admin">CM Rate
Admin</option>
	<option class="P_Enhancement" value="EN_Add_On">EN Add
On</option>
	<option class="Production" value="Windows_2000">Windows
2000</option>
	<option class="Production" value="Windows_2003">Windows
2003</option>
	<option class="Staging" value="Windows_2000">Windows
2000</option>
	<option class="Staging" value="Windows_2003">Windows
2003</option>
	<option class="Testing" value="Windows_2000">Windows
2000</option>
	<option class="Testing" value="Windows_2003">Windows
2003</option>
</select>