My JavaScript switch case isn't working for some reason, and I can't figure it out.

I am trying to display a certain input only of a certain option is chosen:

function showHideSchools(obj){

    var curSel = obj.options[obj.selectedIndex].value

    switch(curSel)
    {
        case '0-2':
            document.getElementById('schools').style.display="none"
            break;
        case '3-5':
            document.getElementById('schools').style.display="block"
            break;
        case '6-8':
            document.getElementById('schools').style.display="block"
            break;
        case '9-11':
            document.getElementById('schools').style.display="block"
            break;
        case '12-14':
            document.getElementById('schools').style.display="block"
            break;
        case '15-16':
            document.getElementById('schools').style.display="block"
            break;
        case '17-18':
            document.getElementById('schools').style.display="block"
            break;
        case '19 and over':
            document.getElementById('schools').style.display="block"
            break;

        default:
            document.getElementById('schools').style.display="none"
    }
}

Here is the HTML:

<p>
    <label for="childrenAges">Ages of children still living at home: </label>
    <select name="childrenAges" id="childrenAges" onchange="showHideSchools(this);">
        <option>Select one</option>
        <option value="0-2">0-2</option>
        <option value="3-5">3-5</option>
        <option value="6-8">6-8</option>
        <option value="9-11">9-11</option>
        <option value="12-14">12-14</option>
        <option value="15-16">15-16</option>
        <option value="17-18">17-18</option>
        <option value="19 and over">19 and over</option>
    </select>
</p>

<div id="schools" style="display:none">
    <p>
        <label for="schoolName">What school/s do they attend: </label>
        <input type="text" name="schoolName" />
    </p>
</div>

My JavaScript switch case isn't working for some reason, and I can't figure it out.

I am trying to display a certain input only of a certain option is chosen:

function showHideSchools(obj){

    var curSel = obj.options[obj.selectedIndex].value

    switch(curSel)
    {
        case '0-2':
            document.getElementById('schools').style.display="none"
            break;
        case '3-5':
            document.getElementById('schools').style.display="block"
            break;
        case '6-8':
            document.getElementById('schools').style.display="block"
            break;
        case '9-11':
            document.getElementById('schools').style.display="block"
            break;
        case '12-14':
            document.getElementById('schools').style.display="block"
            break;
        case '15-16':
            document.getElementById('schools').style.display="block"
            break;
        case '17-18':
            document.getElementById('schools').style.display="block"
            break;
        case '19 and over':
            document.getElementById('schools').style.display="block"
            break;

        default:
            document.getElementById('schools').style.display="none"
    }
}

Here is the HTML:

<p>
    <label for="childrenAges">Ages of children still living at home: </label>
    <select name="childrenAges" id="childrenAges" onchange="showHideSchools(this);">
        <option>Select one</option>
        <option value="0-2">0-2</option>
        <option value="3-5">3-5</option>
        <option value="6-8">6-8</option>
        <option value="9-11">9-11</option>
        <option value="12-14">12-14</option>
        <option value="15-16">15-16</option>
        <option value="17-18">17-18</option>
        <option value="19 and over">19 and over</option>
    </select>
</p>

<div id="schools" style="display:none">
    <p>
        <label for="schoolName">What school/s do they attend: </label>
        <input type="text" name="schoolName" />
    </p>
</div>

• javascript
• html

• 2 Define "isn't working". What's the desired result and the actual result? – BenV Commented Jul 20, 2010 at 13:45

8 Answers 8

You don't need a switch case:

if(obj.options[obj.selectedIndex].value != "Select one" && obj.options[obj.selectedIndex].value != "0-2"){
    document.getElementById('schools').style.display="block";
}else{
    document.getElementById('schools').style.display="none";
}

As others said, your case tests didn't match the value of the first three options.

There isn't any reason to repeat that line document.getElementById('schools').style.display="block"; over and over. Just let all the conditions that lead to that oute fall through to a single line with that instruction.

function showHideSchools (obj) {

  var curSel = obj.options[obj.selectedIndex].value;

  switch (curSel) {
    case '2':
    case '3':
    case '9-11':
    case '12-14':
    case '15-16':
    case '17-18':
    case '19 and over':
      document.getElementById('schools').style.display = "block";
      break;
    case '1':
    default:
      document.getElementById('schools').style.display = "none";
  }

}

The value of the options 0-2, 3-5 and 6-8 are 1, 2 and 3, respectively.

You have them as 0-2, 3-5 and 6-8 in your JavaScript code.

0-2 3-5 6-8

case '0-2': case '3-5':

Your values and case parameters do not correspond. When you select '0-2', .value is "1".

From your code, it looks like you'd be better off switching the criteria, so that you hide when the value is "" and show the box in all other cases - that looks like what you're trying to do...?

Other than that, I'm not 100% sure what your problem is, but if the problem is that it's not working for the first three items, then the reason is that their values will be 1, 2 and 3, not 0-2 etc, that you're testing for.

The case values are wrong. They have to match the value in the <option> tags, not the displayed text.

So they would be

case '1':
    document.getElementById('schools').style.display="block"
      break;
    case '2':
    document.getElementById('schools').style.display="block"
      break;

etc.

You are not specifying the option values, rather their representation in switch. For example:

case '0-2':

There is nothing like that in the select's option values.

    case '1':
    ...
    case '2':
    ...
    case '3':
    ...
    case '9-11':
    ...
    case '12-14':
    ...

I.e., you should check the content of option's value attribute, not text inside <option></option> tags.