Javascript开关盒 [英] Javascript switch case

问题描述

我的Javascript切换案例由于某种原因无法正常工作，而且我无法弄清楚，我正在尝试显示某个特定选项的某个输入是否被选中，

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

以下是HTML：

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>

推荐答案

您不需要开关盒：

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

这篇关于Javascript开关盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！