JavaScript开关箱

Question

由于某些原因，我的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>

Answer 1

你不需要一个开关箱：

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 2

正如其他人所说，您的case测试与前三个选项的value不匹配。

没有理由一遍又一遍地重复这一行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";
  }

}

Answer 3

期权的value 0-2、3-5和6-8分别为1、2和3。

在您的0-2代码中将它们作为3-5、3-5和6-8。