Onchange sur liste déroulante

Version imprimable

30/04/2017, 22h02
zora.07

Onchange sur liste déroulante

Alors voilà, je suis débutante en javascript. Mon problème c'est que je n'arrive pas à attribuer une fonction différente pour chaque choix (2) qui se trouve dans ma liste. J'ai vu qu'il fallait utiliser onChange mais je ne sais pas comment faire.

Merci à ceux qui prendront le temps de me répondre.
30/04/2017, 23h37
Kennel sébastien

Je ne comprend pas grand chose, à ceux que tu souhaites faire :-/.

C'est quoi la fonction que tu souhaites faire ?

Et c'est quoi le code html de ta liste déroulante ?
01/05/2017, 07h59
Invité
Bonjour et bienvenue sur DVP,

avant tout il faut que :
- tu expliques clairement la problématique (un exemple concret peut servir)
- tu MONTRES le CODE (HTML + JS) que tu as déjà écrit (et qu'on peut éventuellement TESTER)

:salut:

Exemple :

Code:

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
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
  
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.3.3.js"></script>
  <script>
    'use strict';
 
    document.addEventListener( "DOMContentLoaded", ev => {
      
    }, false );
    
    window.addEventListener( "load", ev => {
      
      document.querySelector( "#testSelect" ).addEventListener( "change", ev => {
        let n = ev.target.value;
        
        switch( n ){
          case "1" :
            // votre code, ici message dans la console (touche F12)
            console.log( `Vous avez sélectionnez la valeur ${ n }` );
            break;
          case "2" :
            console.log( `Vous avez sélectionnez la valeur ${ n }` );
            break;
          case "3" :
            console.log( `Vous avez sélectionnez la valeur ${ n }` );
            break;
          case "4" :
            console.log( `Vous avez sélectionnez la valeur ${ n }` );
            break;
          default :
            console.error( "Cette valeur n'existe pas !")
            break;
        }
      });
 
      kIDUnique();
    }, false );
  </script>
</head>
<body>
  <main>
 
    <select id="testSelect">
      <option value="1">Choix un</option>
      <option value="2">Choix deux</option>
      <option value="3">Choix trois</option>
      <option value="4">Choix quatre</option>
    </select>
 
  </main>
</body>
</html>

Peut-être comme ça.

Code:

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
 
<script>
 function titi(valeur) {
  if (valeur=="") return;
 
  if (valeur=="1") {
   fonction_1();
   return;
  }
 
  if (valeur=="2") {
   fonction_2();
   return;
  }  
 }
 
 function fonction_1() {
  alert("1");
 }
 
 function fonction_2() {
  alert("2");
 } 
</script>
<select id="toto" onchange="titi(this.value)">
 <option value="">Sélectionner une valeur</option>
 <option value="1">Valeur 1</option>
 <option value="2">Valeur 2</option> 
</select>

Bonjour,

Il existe de nombreuses solutions à ce problème posé d'une manière un peu vague. Autre exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
      cas = function(nb) { alert("Vous avez sélectionné le choix n°"+nb+".") };
    </script>
  </head>
  <body>
    <select onChange="cas(this.value);"> 
      <option value="1">Choix 1</option>
      <option value="2">Choix 2</option>
      <option value="3">Choix 3</option>
    </select>
  </body>
</html>