Javascript switch cas

Question

mon switch case Javascript ne fonctionne pas pour une raison quelconque, et je ne peux pas le comprendre, je suis en train d'afficher une certaine entrée uniquement d'une certaine option est choisie,

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

Voici le code 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

Vous n'avez pas besoin d'un cas de commutation:

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

les valeurs cas sont fausses, ils doivent correspondre à la value dans les <option> balises, et non le texte.

Ils seraient

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

etc

Answer 3

À partir de votre code, il semble que vous feriez mieux de passer les critères, de sorte que vous cachez lorsque la valeur est "" et afficher la boîte dans tous les autres cas - cela ressemble à ce que vous essayez de faire ...?

Autre que cela, je ne suis pas 100% sûr de ce que votre problème est, mais si le problème est que cela ne fonctionne pas pour les trois premiers éléments, la raison en est que leurs valeurs seront 1, 2 et 3, pas 0-2 etc, que vous testez.

Answer 4

Le value des options 0-2, 3-5 et 6-8 sont 1, 2 et 3 respectivement. Vous les avez comme 0-2, 3-5 et 6-8 dans votre javascript.

Answer 5

Vous n'êtes pas les option valeurs indiquez plutôt leur représentation dans switch, par exemple:

case '0-2': 

Il n'y a rien de tel que les valeurs des options de la sélectionner.

Answer 6

0-2 3-5 6-8

cas '0-2': cas « 3-5 ':

Vos valeurs et les paramètres de cas ne correspondent pas. Lorsque vous sélectionnez '0-2', la valeur est "1"

Answer 7

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

I.e. vous devriez vérifier le contenu de l'attribut de l'option valeur, texte et non des tags à l'intérieur

Answer 8

Comme d'autres ont dit, vos case essais ne correspondaient pas au value des trois premières options.

Il n'y a aucune raison de répéter cette ligne document.getElementById('schools').style.display="block"; encore et encore, laissez simplement toutes les conditions qui mènent à ce résultat tomber sur une seule ligne avec cette instruction.

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

Il suffit de mettre en place un jsfildde pour elle: http://jsfiddle.net/nHg9t/. Cela semble aller très bien pour autant que je puisse voir ... Pouvez-vous jeter un coup d'oeil à ceci et dire si cela fait la bonne chose et sinon ce qui ne va pas et si oui, comment diffèrent vos tests ...