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

случай значения неверны, они должны соответствовать value в <option> теги, а не отображаемый текст.

Так они будут

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

и т.д.

Answer 3

От вашего кода, это выглядит, как вы бы лучше переключая критерии, так что вы скрываете, когда значение "" и показать окно в все остальные случаи - это похоже на то, что вы пытаетесь сделать ...?

Кроме того, я не 100% уверен, что ваша проблема, но если проблема в том, что он не работает в течение первых трех пунктов, то причина в том, что их значения будут 1, 2 и 3, а не 0-2 и т. д., которые вы тестируете.

Answer 4

The value из вариантов 0-2, 3-5 и 6-8 являются 1, 2 и 3 соответственно. У вас их есть 0-2, 3-5 и 6-8 в вашем javascript.

Answer 5

Вы не указывая option ценности, а их представления в switch, например:

case '0-2': 

Там нет ничего подобного, что в значениях ОПЦИИ, выберите х.

Answer 6

0-2 3-5 6-8

случай '0-2': случай «3-5 ':

Ваши значения и параметры случая не соответствуют. Когда вы выбираете «0-2», значение «1»

Answer 7

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

I.e. Вы должны проверить содержимое атрибута значения опциона, а не текст внутри тегов

Answer 8

Как другие говорили, ваши 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 9

Просто настроить jsfildde для него: http://jsfiddle.net/nHg9t/. Это, кажется, работает нормально, насколько я могу судить ... Можете ли вы взглянуть на это и сказать, если он поступает правильно, а если нет, то что не так, и если да, то как ваши тесты отличаются ...