[thelist] Re: Radio buttons: dynamically loading form data

Tue Apr 9 22:09:00 CDT 2002

At 04:04 PM 4/9/2002, Timothy Martens wrote:

>Anthony -- More More! Does this imply that you're using a array for all
>the option values rather than 3 different functions? Something like (I'm

Here a snip of what I built a few years ago that rebuilt a the options of a
select tag #2 from the action of selecting from select tag #1. There a
better ways to do this, but this worked great for me for quite a long time
in a heavily used production web site.

NOTE: For Netscape 4 you need to "preload" SelectTwoName with spaces and
blank rows in order for the formating to look descent. You may need to
string together 20-30 &nbsp; in order to push out the select box far enough.

Hope this helps.

<SCRIPT LANGUAGE="JavaScript">
<!--

if (typeof(Option) + "" == "undefined") {
alert("Your broswer does not support the level of JavaScript, \n necessary
to run these dynamic menus. Please consider \n upgrading your browser.");
}

function Reset() {
varArray = new Array(1);
varArray[0] = new Option("*** Use Select #1 First ***", "None", true, true);
}

function ResetAllMenus() {
with (document.FlavorForm.Category) {
options[0].selected=true;
}
UpdateMenu(0);
}

function SelectOptionOne() {
varArray = new Array(4);
varArray[0] = new Option("*** Select Two ***", "None", true, true);
varArray[1] = new Option("1. Name of Option One", "1. Value of Option One",
false, false);
varArray[2] = new Option("1. Name of Option Two", "1. Value of Option Two",
false, false);
varArray[3] = new Option("1. Name of Option Three", "1. Value of Option
Three", false, false);
}

function SelectOptionTwo() {
varArray = new Array(4);
varArray[0] = new Option("*** Select Two ***", "None", true, true);
varArray[1] = new Option("2. Name of Option One", "2. Value of Option One",
false, false);
varArray[2] = new Option("2. Name of Option Two", "2. Value of Option Two",
false, false);
varArray[3] = new Option("2. Name of Option Three", "2. Value of Option
Three", false, false);
}

function SelectOptionThree() {
varArray = new Array(4);
varArray[0] = new Option("*** Select Two ***", "None", true, true);
varArray[1] = new Option("3. Name of Option One", "3. Value of Option One",
false, false);
varArray[2] = new Option("3. Name of Option Two", "3. Value of Option Two",
false, false);
varArray[3] = new Option("3. Name of Option Three", "3. Value of Option
Three", false, false);
}

function UpdateMenu(varItemIndex) {
if (varItemIndex == 0) {
Reset();
}
if (varItemIndex == 1) {
SelectOptionOne();
}
if (varItemIndex == 2) {
SelectOptionTwo();
}
if (varItemIndex == 3) {
SelectOptionThree();
}
with (document.FormName.SelectTwoName) {
for (var i = options.length - 1; i > 0; i--) {
options[i]=null;
}
for (var i = 0; i <= varArray.length - 1; i++) {
options[i] = varArray[i];
}
options[0].selected=true;
}
}

//-->
</SCRIPT>

<body onLoad="ResetAllMenus()">

<FORM NAME="FormName" ACTION="foo.cgi" METHOD=POST>

<select NAME="SelectOneName" onChange="UpdateMenu(this.selectedIndex)"
size="1">
<option selected value="None">** Please Select Me First **</option>
<option>Select Option One</option>
<option>Select Option Two</option>
<option>Select Option Three</option>
</select>

<SELECT NAME="SelectTwoName">*** Use Select #1 First ***</OPTION>
<OPTION VALUE="None" SELECTED>&nbsp;&nbsp;</OPTION>
<OPTION VALUE="None" SELECTED>&nbsp;&nbsp;</OPTION>
<OPTION VALUE="None" SELECTED>&nbsp;&nbsp;</OPTION>
</select>

</FORM>
---
Anthony Baratta
President
Keyboard Jockeys

"Conformity is the refuge of the unimaginative."