Javascript switch case

Question

Hi guys, 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>

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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";
}

Answer 6

0-2 3-5 6-8

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

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

Answer 7

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 tags

Answer 8

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

There's no reason to repeat that line document.getElementById('schools').style.display="block"; over and over, just let all the conditions that lead to that outcome 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";
  }

}  

Answer 9

Just set up a jsfildde for it: http://jsfiddle.net/nHg9t/ . This seems to work fine as far as I can see... Can you take a look at this and say if it is doing the right thing and if not what is wrong and if so how your tests differ...