Invisible 2nd drop down box that becomes visible when 1st selected

[ag5t]

Is it possible to do the following?

Have a javascripted drop-down list box that when an item is selected - opens a 2nd drop down box to the right with sub-topics? I know you can put two drop-down boxes side-by-side by I would like the one to the right to not appear until something is clicked on in the left side box.

Example:
Left side drop down has choices Baseball Basketball Football - if you click on Baseball, then the right side drop down box will appear (previously invisible) and have selections Astros Athletics Braves Cubs etc. I guess the right side drop down box would remain visible until you refresh the page.
Thanks.

 

[cLFlaVA]

<form name="f">
  <select name="sport" onchange="if (this.selectedIndex >0){this.form.team.style.visibility='visible';}">
    ...
  </select>
  <select name="team" style="visibility: hidden;">
    ...
  </select>
</form>

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]