Need help with javascript to show/hide dropdown menus

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.

Code (markup):

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


Help is gladly appreicated.

 

I'd say use jQuery. 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();
  }
}

PHP: