Style-changing handler for an HTML drop-down box

Question

How can I maybe do some loop that will compress the amount of JavaScript/jQuery I need to use. I have a function s3episodesChange() linked to a <select> tag. This <select> tag has a few different selectable values that change style properties of various different <button> tags.

All it is doing is showing the appropriate button and making sure all other buttons are hidden well before showing a new one. It also makes sure that when you load the page it will show the first button tied to the first select tags value.

Have a look at my code and tell me what steps I could possibly take to try and achieve this using less overall code.

function season3episodesChange() {

//Episodes:
var episode1 = "1 - The Thin White Line";
var episode2 = "2 - Brian Does Hollywood";
var episode3 = "3 - Mr. Griffin Goes to Washington";
var episode4 = "4 - One If by Clam, Two If by Sea";
var episode5 = "5 - And the Wiener Is...";
var episode6 = "6 - Death Lives";
var episode7 = "7 - Lethal Weapons";
-------------------/\---------------------------
//There are 22 total vars just I cut most of them out.

var selectseason3episode = document.getElementById('selectseason3episode');
var season3episode1 = document.getElementById('season3episode1');

if(selectseason3episode.value == episode1){
    season3episode1.style.display = 'inline-block';
} else { document.getElementById('season1episode1').style.display = 'none'; }

if(selectseason3episode.value == episode2){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode2').style.display = 'inline-block';
} else { document.getElementById('season3episode2').style.display = 'none'; }

if(selectseason3episode.value == episode3){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode3').style.display = 'inline-block';
} else { document.getElementById('season3episode3').style.display = 'none'; }

if(selectseason3episode.value == episode4){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode4').style.display = 'inline-block';
} else { document.getElementById('season3episode4').style.display = 'none'; }

if(selectseason3episode.value == episode5){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode5').style.display = 'inline-block';
} else { document.getElementById('season3episode5').style.display = 'none'; }

if(selectseason3episode.value == episode6){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode6').style.display = 'inline-block';
} else { document.getElementById('season3episode6').style.display = 'none'; }

if(selectseason3episode.value == episode7){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode7').style.display = 'inline-block';
} else { document.getElementById('season3episode7').style.display = 'none'; }

if(selectseason3episode.value == episode8){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode8').style.display = 'inline-block';
} else { document.getElementById('season3episode8').style.display = 'none'; }

if(selectseason3episode.value == episode9){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode9').style.display = 'inline-block';
} else { document.getElementById('season3episode9').style.display = 'none'; }

if(selectseason3episode.value == episode10){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode10').style.display = 'inline-block';
} else { document.getElementById('season3episode10').style.display = 'none'; }

if(selectseason3episode.value == episode11){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode11').style.display = 'inline-block';
} else { document.getElementById('season3episode11').style.display = 'none'; }

if(selectseason3episode.value == episode12){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode12').style.display = 'inline-block';
} else { document.getElementById('season3episode12').style.display = 'none'; }

if(selectseason3episode.value == episode13){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode13').style.display = 'inline-block';
} else { document.getElementById('season3episode13').style.display = 'none'; }

if(selectseason3episode.value == episode14){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode14').style.display = 'inline-block';
} else { document.getElementById('season3episode14').style.display = 'none'; }

if(selectseason3episode.value == episode15){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode15').style.display = 'inline-block';
} else { document.getElementById('season3episode15').style.display = 'none'; }

if(selectseason3episode.value == episode16){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode16').style.display = 'inline-block';
} else { document.getElementById('season3episode16').style.display = 'none'; }

if(selectseason3episode.value == episode17){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode17').style.display = 'inline-block';
} else { document.getElementById('season3episode17').style.display = 'none'; }

if(selectseason3episode.value == episode18){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode18').style.display = 'inline-block';
} else { document.getElementById('season3episode18').style.display = 'none'; }

if(selectseason3episode.value == episode19){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode19').style.display = 'inline-block';
} else { document.getElementById('season3episode19').style.display = 'none'; }

if(selectseason3episode.value == episode20){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode20').style.display = 'inline-block';
} else { document.getElementById('season3episode20').style.display = 'none'; }

if(selectseason3episode.value == episode21){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode21').style.display = 'inline-block';
} else { document.getElementById('season3episode21').style.display = 'none'; }

if(selectseason3episode.value == episode22){
    season3episode1.style.display = 'none';
    document.getElementById('season3episode22').style.display = 'inline-block';
} else { document.getElementById('season3episode22').style.display = 'none'; }

}

Note: The JavaScript is being loaded on the script tag like so:

<select onload="javascript:season1episodesChange()" onchange="javascript:season1episodesChange()">

I have onload so that it loads the season1 episode1 button when the page loads. I haven't actually tested if it even needs to be there, but I'm pretty sure it does.

Answer 1

Instead of having individual variables for each episode, and then iterating over all of them, use an array.

By using an array, you can use a for loop to iterate over all of them, turning the potentially massive amount of loops into one loop:

function season3episodesChange() {

    //Episodes:
    var episodes = [
        "1 - The Thin White Line",
        "2 - Brian Does Hollywood",
        "3 - Mr. Griffin Goes to Washington",
        "4 - One If by Clam, Two If by Sea",
        "5 - And the Wiener Is...",
        "6 - Death Lives",
        "7 - Lethal Weapons"
    ];

    var selectseason3episode = document.getElementById('selectseason3episode');

    for (var i = 1; i <= episodes.length; i++){
        if (selectseason3episode.value == episodes[i - 1]){
            document.getElementById('season3episode'+ i).style.display = 'inline-block';
        } else {
            document.getElementById(['season3episode' + i].join('')).style.display = 'none';
        }
    }
}