Need help with javascript to show/hide dropdown menus

[Sapphiro]

Hi there people, I'm developing a new social website and I'd like to find out how I can use javascript to show different hidden <div> based on the selected value from a particular drop down box. I only need to know the basic structure so I can work out from there. :)


Here's the example scenario:

A user wants to register at my site, so when he selects his country from the drop down menu, a few 'originally-hidden' City & state input fields appear based on his selection. It's something like hotmail registration concept but I just need a simple code structure so I can continue with this concept. :)


eg.

<select id="country">
<option>Country A</option>
<option>Country B</option>
</select>


if.. selected value is country A, show the dropdown menu for a list of Country A's cities and states.
and if.. selected value is country B, show the dropdown menu for a list of Country B's cities and state.





so far, my only lead is to use
<select id="country" onblur="...javascript">. =/


Help is gladly appreicated. :)

[awatson]

I'd say use jQuery (http://docs.jquery.com/Main_Page). Then set an onChange handler on the drop down that fires off a javascript function. The function just looks at the value of the drop-down and hides/shows the appropriate div(s) as needed. For example (not tested)


<select name="country" id="country" onchange="countryChange(this.val)">
<option value="country1">Country 1</option>
etc...
</select>

JAVASCRIPT:
function countryChange($country) {
if ($country == 'country A') { // or whatever
$("div#countryDiv").show();
}
}