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的{{1}}分别为6-8，1和2。您在javascript中将它们设为3，0-2和3-5。

Answer 4

0-2      3-5      6-8

案例'0-2'：   案例'3-5'：

您的价值观和案例参数不一致。选择“0-2”时，。值为“1”

Answer 5

案例值错误，必须与value代码中的<option>相匹配，而不是显示的文字。

所以他们会

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

等

Answer 6

从您的代码中看，您最好切换条件，以便在价值为""时隐藏并在所有其他情况下显示框 - 看起来像你想要做的......？

除此之外，我不是100％确定您的问题是什么，但如果问题是前三个项目不起作用，那么原因是它们的值为1，{您正在测试的{1}}和2，而不是3等。

Answer 7

您没有在option中指定switch值而非指定其值，例如：

case '0-2':

在选择的选项值中没有类似的东西。

Answer 8

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

即。您应该检查选项的值属性的内容，而不是标记内的文本

Answer 9

只需为它设置一个jsfildde：http://jsfiddle.net/nHg9t/。就我所见，这似乎工作得很好......你能看看这个，并说它是做正确的事情，如果没有，那么你的测试有何不同......

Javascript切换案例

9 个答案: