Dropdown menu on a form

[Brandon Harker]

A form on a web page has two dropdown menus. The value selected for the
first determines the options available in the second.
The problem is that I can't just set the value on this first dropdown menu
because it doesn't set the options available in the second.

I need to figure out how to set the value for the first dropdown menu in a
manner that mimics if a user had actually clicked on the dropdown button and
selected a value.

Any help would be greatly appreciated as I've struggled with this problem
for over a day now.

The pages code is as follows:
<!--webbot bot="Validation" S-Display-Name="Primary Category"
B-Value-Required="TRUE" -->

select name="category" size="1" onchange="pickCategory(this,
this.form.type);">

<!-- CATEGORY -->
<script language="JavaScript">
selected = "" == "" ? "selected" : "";
document.write("<option value=\"\" " + selected + "> -- no category
specified -- </option>\n");

for (i=0; i<Categories.length; i++)
{
category = Categories[i].category;
description = Categories[i].category;

selected = (category == "") ? "selected" : "";

document.write("<option value='" + category + "' " + selected + ">" +
description + "</option>\n");
}
</script>

<!--webbot bot="Validation" S-Display-Name="Primary Type"
B-Value-Required="TRUE" -->

<select name="type" size="1">

<!-- TYPE -->
<script language="JavaScript">
selected = ("" == "") ? "selected" : "";
document.write("<option value=\"\" " + selected + "> -- no type
specified -- </option>\n");

for (i=0; i<Types.length; i++)
{
if (Types[i].category == "")
{
type = Types[i].type;
description = Types[i].type;

selected = (type == "") ? "selected" : "";

document.write("<option value='" + type + "' " + selected + ">" +
description + "</option>\n");
}
}
</script>