onChange dans un <select>

**shootingcoco** · 01/01/2010, 19h28

Bonjours à tous et bonne année,

Voilà j'ai un problème sans doute très simple pour vous :

Dans un <select> j'ai plusieurs <option>, je veux qu'en changeant d'option cela exécute la fonction que j'ai créer qui s'appelle change() .

Code :

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

1
2
3
4
5
6
<select onChange="change();">
 
	<option value="1">1ère option</option>
	<option value="2">2ème option</option>  
 
</select>

Mon problème est que je veux rajouter la valeur de l'option choisie juste après "change" pour que ça exécute change2() en choisissant l'option 2, et change1() en choisissant l'option 1 etc ...

Merci pour vos réponses

**xess91** · 01/01/2010, 19h46

Salut,

Peux-tu envoyer ton script javascript et html juste la fonction change() et les selects ?

Merci.

**will74** · 01/01/2010, 19h52

Bonsoir.

Essaye avec cela :

Code :

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

1
2
3
4
5
6
<select>
 
<option onChange="change(this.value)" value="1">1ère option</option>
<option onChange="change(this.value)" value="2">2ème option</option>
 
</select>

Tu pourras ainsi passer la valeur de l'option sélectionné en paramètre de ta fonction change()....

A l'intérieur de celle-ci tu fais une petite condition :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function change(param) {
     if (param == 1) {
        new function() {
          /* ton code de la fonction change1 */
        }
     }
     else if (param == 2) {
        new function() {
          /* ton code de la fonction change2 */
        }
     }
 
     ....

Voilà, encore faut-il que je voie comment sont écrites tes fonctions change1() et change2(), car là on imbrique plusieurs fonctions.

wILL

**SpaceFrog** · 01/01/2010, 19h55

Non l'option n'accepte pas l'evènement onchnage qui doit rester sur la balise select

Il faut passer la value et faire un aiguillage:

Code :

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
 
 
<select onChange="change(this.value);">
 
	<option value="1">1ère option</option>
	<option value="2">2ème option</option>  
 
</select>
 
function change(val){
          switch (val){
                            case 1 : change1();
                                        break;
                            case 2 : change2();
                                        break;
                           }
}

**will74** · 01/01/2010, 20h05

Autant pour moi SpaceFrog.
Et c'est vrai que le switch est mieux pensé qu'une bête structure conditionelle

**shootingcoco** · 01/01/2010, 20h26

Énorme merci pour la rapidité de vos réponses.

Ma fonction change() me sert à modifier la value="" d'un <input> dans le même formulaire.

Suite à vos réponses j'ai essayé le code suivant :

Code :

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
 
<form name='formulaire'>
 
<input type="text" name="champs" value="1" />
 
<select onChange="change(this.value);">
	<option value="1">1ère option</option>
	<option value="2">2ème option</option>  
</select>
 
<input type="submit" />
 
</form>
 
<script type="text/javascript">
function change(param){
          switch (param){
                            case 1 : change1();
                                        break;
                            case 2 : change2();
                                        break;
                           }
}
 
function change1() {
    document.forms['formulaire'].champs.value="1";
}
 
function change2() {
    document.forms['formulaire'].champs.value="2";
}
</script>

Voilà et ça ne marche pas.

**xess91** · 01/01/2010, 20h41

Pourquoi tu ne fairais pas ça :

Code :

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
 
<html>
<head>
<script type="text/javascript">
function change(param){
	var valeur;
	valeur = document.getElementById(param).value;
	if(valeur == 1){ change1(); }
	if(valeur == 2){ change2(); }
}
 
function change1() {
    document.getElementById('champs').value = "1";
}
 
function change2() {
    document.getElementById('champs').value = "2";
}
</script>
</head>
<body>
 
<form name='formulaire'>
 
<input type="text" id="champs" name="champs" value="1" />
 
<select id='selection' onChange="change('selection');">
	<option value="">Choisissez une option</option>
	<option value="1">1ère option</option>
	<option value="2">2ème option</option>  
</select>
 
<input type="submit" />

ou alors sur la même structure que les autres ton proposés :

Code :

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
 
<html>
<head>
<script type="text/javascript">
function change(param){
    switch (param){
        case '1' : change1();
                    break;
        case '2' : change2();
                    break;
		}
	}
 
function change1() {
    document.formulaire.champs.value="1";
}
 
function change2() {
    document.formulaire.champs.value="2";
}
</script>
</head>
<body>
 
<form name='formulaire'>
 
<input type="text" name="champs" value="1" />
 
<select id='selection' onChange="change(this.value);">
	<option value="">Choisissez une option</option>
	<option value="1">1ère option</option>
	<option value="2">2ème option</option>  
</select>
 
<input type="submit" />
 
</form>

onChange dans un <select>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager