JavaScript switch case
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'开发者_Go百科).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>
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 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";
}
}
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.
精彩评论