Style-Changing Handler For a Select Box Similar to my recently asked question: Style-changing handler for an HTML drop-down box How can I compress down JS and almost automate it?

I tried changing up the old questions answer a bit but never could get it working as i'm very new to JS I mainly do PHP.

So I just need the following JS compressed and automated as much as possible like last question:

function seasonChange() {

if(document.getElementById('selectseason').value == "1"){
    if(document.getElementById('selectseason1episode').value != "1 - Death Has A Shadow") {
        document.getElementById('season1episodes').style.display = 'block';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'none';
        document.getElementById('s1buttons').style.display = 'block';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'none';
    } else {
        document.getElementById('season1episode1').style.display = 'inline-block';
        document.getElementById('season1episodes').style.display = 'block';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'none';
        document.getElementById('s1buttons').style.display = 'block';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'none';
    }
}

if(document.getElementById('selectseason').value == "2"){
    if(document.getElementById('selectseason2episode').value != "1 - Peter, Peter, Caviar Eater") {
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'block';
        document.getElementById('season3episodes').style.display = 'none';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'block';
        document.getElementById('s3buttons').style.display = 'none';
    } else {
        document.getElementById('season2episode1').style.display = 'inline-block';
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'block';
        document.getElementById('season3episodes').style.display = 'none';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'block';
        document.getElementById('s3buttons').style.display = 'none';
    }
}

if(document.getElementById('selectseason').value == "3"){
    if(document.getElementById('selectseason3episode').value != "1 - The Thin White Line") {
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'block';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'block';
    } else {
        document.getElementById('season3episode1').style.display = 'inline-block';
        document.getElementById('season1episodes').style.display = 'none';
        document.getElementById('season2episodes').style.display = 'none';
        document.getElementById('season3episodes').style.display = 'block';
        document.getElementById('s1buttons').style.display = 'none';
        document.getElementById('s2buttons').style.display = 'none';
        document.getElementById('s3buttons').style.display = 'block';
    }
}

}


Note: I cant reply to questions about the code but all I will say is the select season . value == 1 bit is season one e.g. I have shown 3 examples but there could be more then 3 seasons so maybe compress and automate using that $i++ variable.
Instead of testing the value of the HTML element, pass the season number in as a variable, and then you can use some of that simplifcation magic we used before:

function seasonChange() {

    var seasonNum = document.getElementById('selectseason').value;
    var first_episodes = [
        "1 - Death Has A Shadow",
        "1 - Peter, Peter, Caviar Eater",
        "1 - The Thin White Line"
    ];

    for (var i = 1; i &lt;= first_episodes.length; i++){
        if (document.getElementById('selectseason' + seasonNum + 'episode').value == first_episodes[i - 1]) {
            document.getElementById('season' + seasonNum + 'episode1').style.display = 'inline-block';
        }
        var showOrNot = (seasonNum == i ? 'block' : 'none');
        document.getElementById('season' + i + 'episodes').style.display = showOrNot;
        document.getElementById('s' + i + 'buttons').style.display = showOrNot;
    }

}


This uses the season numbers, to test whether its the one you're switching into or not.

One suggestion I'd make though is that, instead of the first_episodes variable, I'd use a database script, in PHP or something similar, to hit the database for the different episodes/seasons.

That way you can totally move this to the automated paradise you want.