Hide/Show Dropdowns based on previous dropdown selection with Javascript

Looking for answer in Jquery or Mootools (mootools preferably) - but I have 2 'hidden' drop downs and one that shows.

Once the user selects the choice from the displayed dropdown, I want the appropriate dropdown list to show up. Once they make a selection from the 2nd list, the appropriate 3rd list will show up.

If the user goes back and changes his choice on the first drop down, all the other drop downs should go back to being hidden, and the 2nd dropdown list should show.

The current setup actually works the first time the user loads the page - if they select something from the first drop down, the appropriate list in the 2nd drop down displays. If they go back and change it, nothing happens. I'm sure it's something to do with my Javascript as I'm not very good with it. Just looking for some help with this.

here is my current JS:

var lastList = "";
function ChangeDropdowns(listName){
//hide last div
if (lastList) {
document.getElementById('lastList').style.display='none';
}
//value box is not nothing & object exists - change class to display
if (listName && document.getElementById(listName)){
document.getElementById(listName).style.display ='block';
lastList=listName;
}
}

My current HTML looks like this: (I've included just the first and 2nd dropdowns, the 3rd is just a further breakdown)

Dropdown 1 (shown when the page is loaded):

<div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Beer Style:</label><select size="1" id="style" class=" validate['required']" title="" type="select" name="style" onchange="ChangeDropdowns(this.value)">
<option value="">-Choose A Style-</option>
<option value="Ale">Ale</option>
<option value="Lager">Lager</option>
<option value="Hybrid">Hybrid</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>

Dropdown 2 (hidden - as you can see):

<div id="Ale"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Ale?</label>
    <select>
      <option value="">-Choose An Ale-</option> 
      <option value="American Ale">American Ale</option>
      <option value="Belgian / French Ale">Belgian / French Ale</option>
      <option value="English Ale">English Ale</option>
      <option value="Finnish Ale">Finnish Ale</option>
      <option value="German Ale">German Ale</option>
      <option value="Irish Ale">Irish Ale</option>
      <option value="Russian Ale">Russian Ale</option>
      <option value="Scottish Ale">Scottish Ale</option>
    </select>
</div>
<div id="Lager"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Lager?</labe开发者_如何转开发l>
    <select>
    <option value="">-Choose A Lager-</option>
      <option value="American Lager">American Lager</option>
      <option value="Czech Lager">Czech Lager</option>
      <option value="European Lager">European Lager</option>
      <option value="German Lager">German Lager</option>
      <option value="Japanese Lager">Japanese Lager</option>
    </select>
</div>
<div id="Hybrid"  class="style-sub-1"  style="display: none;" name="stylesub1" onchange="ChangeDropdowns(this.value)">
  <label>Which Kind of Hybrid?</label> 
    <select>
    <option value="">-Choose A Hybrid-</option>
      <option value="Fruit / Vegetable Beer">Fruit / Vegetable Beer</option>
      <option value="Herbed / Spiced Beer">Herbed / Spiced Beer</option>
      <option value="Smoked Beer">Smoked Beer</option>
    </select>
</div><div class="clear"></div><div id="error-message-style-sub-1"></div></div>

This code will work for the 2 levels shown:

$("#beerStyle").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1").hide ();
    $('#' + targID).show ();
} )

See it in action at jsFiddle.

~~~
For 3 levels of dropdowns, the code becomes:

$("#beerStyle").change ( function () {
    var targID  = $(this).val ();
    $("div.style-sub-1, div.style-sub-2").hide ();
    $('#' + targID).show ();
} )

$("div.style-sub-1 select").change ( function () {
    /*--- These option values are too non-standard to double as safe id's.
        Change the values of the option tags to something safe for id's or 
        add a rel attribute to hold the id's.
    */
    var targID  = $(this).val ();
    $("div.style-sub-2").hide ();
    $('#' + targID).show ();
} )

Note that I changed the id "style" to "beerStyle". Do not use super-common, or reserved words as identifiers!

Using JQuery you can try the below code

$("#style").change(function(){
   $("select").not("#style").hide();
   $("#"+$(this).val()).show();
});