JavaScript开关盒

我的JavaScript开关盒由于某种原因无法正常工作，我无法理解

我试图显示某个输入，但仅当选择某个选项时：

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

以下是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>

仍住在家中的儿童年龄：
选择一个
0-2
3-5
6-8
9-11
12-14
15-16
17-18
19岁及以上


他们在哪些学校上学：

案例值错误。它们必须匹配

标记中的

值，而不是显示的文本

他们会是这样的

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

等等。
从您的代码中，您最好切换条件，以便在值为“
”
时隐藏，并在所有其他情况下显示该框-这看起来像您正在尝试做的

除此之外，我不能100%确定您的问题是什么，但如果问题是它对前三项不起作用，那么原因是它们的值将是您正在测试的
1
、
2
和
3
，而不是
0-2
等。
0-2
选项的
值，
3-5
和
6-8
分别是
1
、
2
和
3

在JavaScript代码中，它们分别是
0-2
、
3-5
和
6-8
。
您没有指定
选项
值，而是指定它们在
开关
中的表示形式。例如：

case '0-2':

select的选项值中没有类似的选项。
您不需要开关盒：

0-2
3-5
6-8
案例“0-2”：
案例“3-5”：

您的值和大小写参数不对应。选择“0-2”时，.值为“1”。
案例“1”：
...
案例“2”：
...
案例“3”：
...
“9-11”案：
...
案例“12-14”：
...

也就是说，您应该检查选项的值属性的内容，而不是标记内的文本。
正如其他人所说，您的
案例
测试与前三个选项的
值
不匹配

没有任何理由重复该行
document.getElementById（'schools'）.style.display=“block”一遍又一遍。只要让所有导致这种结果的条件都按照这条指令排成一行就行了

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

}

定义“不起作用”。期望的结果和实际的结果是什么？哎呀，对不起，这是一个输入错误，我的文件中没有。在“0-2”上也没有显示。他可能会根据在某个时候选择的选项来做不同的事情。至少，这是我能找出那些多余的箱子的唯一原因。@Josh：你说得对，我没看到那个。您可以添加OR语句@no:猜不到；）是的，什么都没有说。这只是初步的“让它工作”阶段，一旦我让它按预期工作，我将尝试清理代码并使其更高效。您不应该使用
document.getElementById（“childrenAges”）
访问下拉列表（尤其是不能两次）。像Kielei那样提供一个引用作为参数更好。好吧，它似乎使用一个简单的if语句，if（curSel==“yes”）{…etc}else{…etc}但是当我尝试实现这个开关时，它就是不起作用，尽管我看不出它有什么问题。
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";
  }

}