Utilisation d'un switch case

**grisbi** · 31/03/2018, 18h32

Bonojur,

j'ai realise ce petit code afin d'apprendre jquery mais ça ne fonctionne pas
par contre ça fonctionne avec if else elseif
le but est d'afficher ou masquer un champ suivant un choix dans une select

qu'est ce qui ne vas pas dans mon switch case

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
 
</head>
 
 
<script type="text/javascript">
$(document).ready(function() {
 
    $('#champ1').hide(); // on cache le champ par défaut
     
    $('select[name="couleurs"]').change(function() { // lorsqu'on change de valeur dans la liste
    var valeur = $(this).val(); // valeur sélectionnée
     
 
        switch (valeur) {
    case Jaune:
     $('#champ1').show(); 
        break;
    case bleu:
      $('#champ1').show();  
        break;
     default:
     $('#champ1').hide();  
        break;
    }
          
    });
 
});
</script>
 
<body>
 
<form method="post" action="">
    <select name="couleurs">
        <option value=""> Choix couleur </option>
        <option value="vert">Vert</option>
        <option value="jaune">Jaune</option>
	<option value="bleu">Bleu</option>
	<option value="rouge">Rouge</option>
	<option value="violet">Violet</option>
    </select>
 
    <input type="text" id="champ1" />
 
</form>
 
</body>
</html>

merci d'avance de votre aide

**mathieu** · 31/03/2018, 20h12

regardez la console de développement de votre navigateur pour voir le message d'erreur.

Invité · 31/03/2018, 21h05

Bonjour,

JavaScript ne supporte pas les fautes de syntaxe...

Il manque les guillemets (chaine)
De plus, les value des option sont en minuscules ('jaune')

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    case 'jaune':

Et on peut simplifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    switch (valeur) {
    case 'jaune':
    case 'bleu':
      $('#champ1').show();  
        break;
     default:
        $('#champ1').hide();  
    }

**grisbi** · 02/04/2018, 20h28

Un grand merci a toi

Quand on est débutant c'est pas simple on voudrait que ça fonctionne immédiatement
mais faut bien commencer par un début et ce commencement passe souvent par un forum d'entraide

donc encore un grand merci a ceux qui se devouent pour aider les débutants même si ... certains comme moi devraient
ouvrir les yeux pour voir leurs erreurs

à bientôt

Utilisation d'un switch case

jQuery

Vue hybride

Discussions similaires

Partager

Partager