Help with DropDown Box Code.

Using auto population.

[Chopster]

I want to edit this code I got from a Javascript example website.

Right now the code causes one drop down box selection to auto populate another dropdown box to the right of it. Everything in the code works fine on my site, but the main problem is that the example I got from the Javascript site just makes it so that when you click the "GO" button, it only opens a javascript box confirming what I selected (instead of opening a page based on the selection).

What I want to do is edit the code so that it will load pages based on the selections they made in the dropdown boxes.

Here's the code in the HEAD tag:
----------
function setOptions(chosen) {
var selbox = document.myform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('[Please select a city first]',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Arts & Entertainment','Boston - Arts & Entertainment');
selbox.options[selbox.options.length] = new Option('Auto & Vehicle','Boston - Auto & Vehicle');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('Arts & Entertainment','Chicago - Arts & Entertainment');
selbox.options[selbox.options.length] = new Option('Auto & Vehicle','Chicago - Auto & Vehicle');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('Arts & Entertainment','Wichita - Arts & Entertainment');
selbox.options[selbox.options.length] = new Option('Auto & Vehicle','Wichita - Auto & Vehicle');
}
}
----------

Here's the code in the HTML body:

----------
<div align="center">
<select name="optone" size="1"
onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected">[Select a City]</option>
<option value="1">Boston</option>
<option value="2">Chicago</option>
<option value="3">Wichita</option>
</select>&nbsp;&nbsp;
<select name="opttwo" size="1">
<option value=" " selected="selected"></option>
</select>
<input type="button" name="go" value="Go" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">
</div>
-----------

Where and what should I do to change it so that when they select, say, Wichita -> Arts & Entertainment, that when they click on the "GO" button, it will load that page.

Any help is appreciated. Thank you.

-Chop

[RonPK]

Shouldn't be too complicated.

1. Make all the lines like

selbox.options[selbox.options.length] = new Option('Arts & Entertainment','Boston - Arts & Entertainment');

have this pattern:

selbox.options[selbox.options.length] = new Option('text shown to user', 'URL to go to');

E.g.:

selbox.options[selbox.options.length] = new Option('Arts & Entertainment', 'boston_arts_entertainment.html');

2. Replace

onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);">

with

onclick = "location = document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value;">

[Chopster]

Thanks RonPK, that worked perfectly. I appreciate the help!