Modifying a script to show/hide divs based on nested drop down selection

I have some drop downs setup where the user selects their school year from a drop down, then depending on what they select, it will show a div with a piece of information and another drop down where they select their position. Based on the position they select, it shows the div with the signing bonus for that position.

That's all working fine, but what I want to happen is when the user selects a different school year, I want it to hide the div that's open for the school year they currently have selected, and then show the new one. So if they have High School selected, and then picked Junior College, I want it to close the high-school div and open the junior-college div. Same with when a position is selected, if they first pick Center and then Shortstop, I want it to hide the hs-center div and show the hs-shortstop div. If that makes sense.

Script: (courtesy of another question here!)

<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
//if value of the box is not nothing and an object with that name exists, then change      the class
if (divName && document.getElementById(divName)) {
    document.getElementById(divName).className = "visibleDiv";
    lastDiv = divName;
}
}
//-->
</script>

CSS: .hiddenDiv { display: none; } .visibleDiv { display: block; }

Relevant HTML: http://pastebin.com/PULvhY8d

The script I'm using originally had this in it, which was hiding the divs, but causing issues with having them nested how I do. So I need a more specific alternative, I'm just not sure how to do it. My knowledge of things like this is minimal, so the more you can dumb it down for me to understand the better!

{
// hide last div
if (lastDiv) {
    document.getElementById(lastDiv).className = "hiddenDiv";
}

I will have a lot more drop downs and information than what's in this example, but I just wanted to get this sorted out before I go any further with adding things.

Let me know if you need anyth开发者_如何学JAVAing else from me, and thank you for the help.

If you can, then I'd suggest you to use jQuery for this. jQuery is very simple to use and will make you life easier every given day :) You will have to add the script tag in your base page for jQuery to be loaded and work in your application. If jQuery is an option for you then take a look at a working example for your scenario here: http://jsfiddle.net/snitin_78/HtHjs/. If you go ahead with using jQuery then remove calls to showDiv() function everywhere in your code.