Modif select avec onchange et lecture

**michelp3** · 26/04/2010, 17h13

Bonjour,

Je patauge depuis un certain temps avec ce problème: j'essaie de modifier un code trouvé dans un bouquin

1) un formulaire

2) un select dans lequel je mets quelques options imbriquées c'est à dire si la balise parente est sélectionnée, l'option imbriquée l'est également. l'inverse n'est pas vrai.

3) problème : je voudrais récuperer les options sélectionnées et les lire dans une fonction resultats()

LA SELECTION IMBRIQUEE SE FAIT NORMALEMENT MAIS JE NE PARVIENS PAS A RECUPERER LES OPTIONS CHOISIES DANS resultats() lorsque j'appuie sur envoyer

Je m'interroge égélement sur l'utilité de return false dans la fonction checkSelect()

voici le code :

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
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
63
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>sélection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
 
 
window.onload = setupEvents;
function setupEvents(evnt) {
   document.someForm.selectOpts.onchange = checkSelect;
 
}
 
 
function checkSelect() {
 
   opts = document.someForm.selectOpts.options;
   for (var i = 0; i < opts.length; i++) {
      if (opts[i].selected) {
          switch(opts[i].value) {
            case "Opt1" : opts[i + 1].selected = true;
                          break;
            case "Opt3" : opts[i + 1].selected = true;
                          break;
            case "Opt4" : opts[i + 1].selected = true;
                          break;
          }
      }
   }
 
   // pas de traitement côté serveur
   return false;
}
 
function resultats() 
{
 
}
 
   //]]>
</script>
</head>
<body>
<form name="someForm"  onSubmit="resultats()" >
<select name="selectOpts"   multiple onchange = "checkSelect()"   >
<option value="Opt1">Option Un</option>
<option value="Opt1a"> -- Option Un A</option>
<option value="Opt2">Option Deux</option>
<option value="Opt3">Option Trois</option>
<option value="Opt3a"> -- Option Trois A</option>
<option value="Opt4">Option Quatre</option>
<option value="Opt4a"> -- Option Quatre A</option>
<option value="Opt5">Option Cinq</option>
</select>
 
<input type="submit" value="Envoyer"  />
</form>
</body>
</html>

**SpaceFrog** · 26/04/2010, 17h22

Code :

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

onsubmit="return resultats()"

**michelp3** · 27/04/2010, 08h13

Je tiens compte de la remarque mais je voudrais en savoir plus sur la fonction resultats()
Voici ce que j'ai essayé mais sans succès, je ne parviens pas à récupérer les valeurs sélectionnées par la fonction checkSelect()

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function resultats() {
resul = document.someForm.selectOpts.options;
   for (var i = 0; i < resul.length; i++) {
      if (resul[i].selected)
	   {
        		alert("choix : " + resul[i].selected.value + " " + resul[i].selected.text);
       }
	   else 
	   {
	   alert("rien");
	   }
                                       }   
}

**Matthieu2000** · 27/04/2010, 14h05

Code :

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

1
2
3
 
 
alert("choix : " + resul[i].value + " " + resul[i].text);

**SpaceFrog** · 27/04/2010, 14h27

Code :

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

alert("choix : " + resul[i].selected.value + " " + document.someForm.selectOpts[document.someForm.selectOpts.selectedIndex].innerHTML);

**michelp3** · 27/04/2010, 16h32

Mattieu 2000 a raison: il y a une erreur dans mon code : selected est en trop. Cependant , cela ne résout pas le problème

Space froq aussi a raison: cela me donne une sélection mais pas la sélection imbriquée....je peux ajouter 1 pour l'obtenir --> OK

Mais , il reste à résoudre le cas où la sélection est mutiple ...une idée ?

Merci pour les conseils précédents

**SpaceFrog** · 27/04/2010, 16h41

pour la selection multiple il faut boucler sur les option et tester si il sont selected ...

**michelp3** · 28/04/2010, 10h06

Oui mais justement, pour boucler sur les options et vérifier si elles sont selected,

il faut pouvoir les récupérer et lorsque je quitte onchange pour tester les choix avec submit et la fonction resultats(), je récupère toutes les options mais les choix ont disparus.

C'est comme si le fait de quitter onchange et de revenir dans le formulaire faisait perdre les choix

Tu m'a donné une piste avec innerhtml pour un choix imbriqué unique mais si je veux faire des choix imbriqué multiple et les lire ensuite dans une fonction qui dépend de submit .....là, je CALE !!!

**SpaceFrog** · 28/04/2010, 10h50

je récupère toutes les options mais les choix ont disparus.

il y a un rechargement de page ???

**michelp3** · 28/04/2010, 11h49

Non, pas de rechargement de page

Recadrons les choses :

1) une liste d'options avec des options imbriquées dans un formulaire

2) une sélection multiple avec un événement onchange qui fait appel à une fonction
Cette fonction permet de choisir plusieurs sélections imbriquées

3 ) toujours dans le formulaire, un événement onsubmit qui fait appel à une fonction où je désire lire les chois effectués

4) la difficulté est de récup ces choix dans la fonction

Maintenant, est-ce possible ?

**SpaceFrog** · 28/04/2010, 12h01

le plus simple serait encore que tu nous montre le code html/js généré ...
ici c'est un forum js ...

**michelp3** · 28/04/2010, 12h24

Voici donc le code complet

Code html :

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

1
2
3
4
5
6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>sélection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Code js :

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
<script type="text/javascript">
//<![CDATA[
 
 
window.onload = setupEvents;
function setupEvents(evnt) {
   document.someForm.selectOpts.onchange = checkSelect;
 
}
 
 
function checkSelect() {
 
   opts = document.someForm.selectOpts.options;
   for (var i = 0; i < opts.length; i++) {
      if (opts[i].selected) {
          switch(opts[i].value) {
            case "Opt1" : opts[i + 1].selected = true;
                          break;
            case "Opt3" : opts[i + 1].selected = true;
                          break;
            case "Opt4" : opts[i + 1].selected = true;
                          break;
          }
      }
   }
 
   // pas de traitement côté serveur
   return false;
}
 
 
function resultats() {
resul = document.someForm.selectOpts.options;
   for (var i = 0; i < resul.length; i++) {
      if (resul[i].selected)
	   {
        		alert("choix : " + resul[i].value + " " + resul[i].text);
       }
	   else 
	   {
	   alert("rien");
	   }
                                       }   
}     
   //]]>
</script>

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
</head>
<body>
<form name="someForm"  onSubmit="resultats()" >
<select name="selectOpts"   multiple onchange = "checkSelect()"   >
<option value="Opt1">Option Un</option>
<option value="Opt1a"> -- Option Un A</option>
<option value="Opt2">Option Deux</option>
<option value="Opt3">Option Trois</option>
<option value="Opt3a"> -- Option Trois A</option>
<option value="Opt4">Option Quatre</option>
<option value="Opt4a"> -- Option Quatre A</option>
<option value="Opt5">Option Cinq</option>
</select>
 
<input type="submit" value="Envoyer"  />
</form>
</body>
</html>

**SpaceFrog** · 28/04/2010, 12h56

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
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
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
//<![CDATA[
 
 
window.onload = setupEvents;
function setupEvents(evnt) {
   document.someForm.selectOpts.onchange = checkSelect;
 
}
 
 
function checkSelect() {
 
   opts = document.someForm.selectOpts.options;
   for (var i = 0; i < opts.length; i++) {
      if (opts[i].selected) {
          switch(opts[i].value) {
            case "Opt1" : opts[i + 1].selected = true;
                          break;
            case "Opt3" : opts[i + 1].selected = true;
                          break;
            case "Opt4" : opts[i + 1].selected = true;
                          break;
          }
      }
   }
 
   // pas de traitement côté serveur
   return false;
}
 
 
function resultats() {
resul = document.someForm.selectOpts.options;
   for (var i = 0; i < resul.length; i++) {
      if (resul[i].selected)
	   {
        		alert("choix : " + resul[i].value + " " + resul[i].innerHTML);
       }
	   else 
	   {
	   alert("rien");
	   }
                                       }   
return false;
}     
   //]]>
</script>
</head>
 
<body >
<form name="someForm"  onSubmit="return resultats()" >
<select name="selectOpts"   multiple onchange = "checkSelect()"   >
<option value="Opt1">Option Un</option>
<option value="Opt1a"> -- Option Un A</option>
<option value="Opt2">Option Deux</option>
<option value="Opt3">Option Trois</option>
<option value="Opt3a"> -- Option Trois A</option>
<option value="Opt4">Option Quatre</option>
<option value="Opt4a"> -- Option Quatre A</option>
<option value="Opt5">Option Cinq</option>
</select>
 
<input type="submit" value="Envoyer"  />
</form>
</body>
 
</html>

**michelp3** · 28/04/2010, 13h20

Malheureusement : ne fonctioone pas

Si je choisis la première option,c'est OK, il affiche l'option + l'option imbriquée

Par contre, pour le reste des options choisies, il affiche rien qui est mon drapeau test

Il ne retient pas la sélection effectuée dans la fonction appélée par onchange que cette sélection soit simple ou multiple.

**SpaceFrog** · 28/04/2010, 13h37

je n'ai rien compris parce que chez moi le code tel que donné ci dessus me fait bien les alerts de ce qui est selectionné ...

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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
//<![CDATA[
 
 
window.onload = setupEvents;
function setupEvents(evnt) {
   document.someForm.selectOpts.onchange = checkSelect;
 
}
 
 
function checkSelect() {
 
   opts = document.someForm.selectOpts.options;
   for (var i = 0; i < opts.length; i++) {
      if (opts[i].selected) {
          switch(opts[i].value) {
            case "Opt1" : opts[i + 1].selected = true;
                          break;
            case "Opt3" : opts[i + 1].selected = true;
                          break;
            case "Opt4" : opts[i + 1].selected = true;
                          break;
          }
      }
   }
 
   // pas de traitement côté serveur
   return false;
}
 
 
function resultats() {
var msg=""
resul = document.someForm.selectOpts.options;
   for (var i = 0; i < resul.length; i++) {
      if (resul[i].selected)
	   {
        		msg+="choix : " + resul[i].value + " " + resul[i].innerHTML + "<br/>";
       }
	   else 
	   {
	          msg+="rien</br>";
	   }
	   document.getElementById('res').innerHTML=msg
                                       }   
return false;
}     
   //]]>
</script>
</head>
 
<body >
<form name="someForm"  onSubmit="return resultats()" >
<select name="selectOpts"   multiple onchange = "checkSelect()"   >
<option value="Opt1">Option Un</option>
<option value="Opt1a"> -- Option Un A</option>
<option value="Opt2">Option Deux</option>
<option value="Opt3">Option Trois</option>
<option value="Opt3a"> -- Option Trois A</option>
<option value="Opt4">Option Quatre</option>
<option value="Opt4a"> -- Option Quatre A</option>
<option value="Opt5">Option Cinq</option>
</select>
 
<input type="submit" value="Envoyer"  />
</form>
<div id='res'></div>
</body>
 
</html>

**Matthieu2000** · 28/04/2010, 13h47

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
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
63
64
65
66
67
68
69
70
71
72
73
74
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
//<![CDATA[
 
 
window.onload = setupEvents;
function setupEvents(evnt) {
   document.someForm.selectOpts.onchange = checkSelect;
 
}
 
 
function checkSelect() {   
   opts = document.someForm.selectOpts.options;
   for (i = 0; i < opts.length; i++) {
      if (opts[i].selected) {
          switch(opts[i].value) {
            case "Opt1" : opts[i + 1].selected = true;
                          break;
            case "Opt3" : opts[i + 1].selected = true;
                          break;
            case "Opt4" : opts[i + 1].selected = true;
                          break;
          }
      }
   }
 
   // pas de traitement côté serveur
   return false;
}
 
 
function resultats() {
resul = document.someForm.selectOpts.options;
var text="";
   for (i = 0; i < resul.length; i++) {
      if (resul[i].selected)
	   {
        		text+="choix : " + resul[i].value + " " + resul[i].innerHTML+"\n";
       }	  
    }   
	if(text==""){
		alert("rien");
		return false;
	}else{
	return confirm(text);
	}
}     
   //]]>
</script>
</head>
 
<body >
<form name="someForm"  onSubmit="return resultats()" >
<select name="selectOpts"   multiple onchange = "checkSelect()"   >
<option value="Opt1">Option Un</option>
<option value="Opt1a"> -- Option Un A</option>
<option value="Opt2">Option Deux</option>
<option value="Opt3">Option Trois</option>
<option value="Opt3a"> -- Option Trois A</option>
<option value="Opt4">Option Quatre</option>
<option value="Opt4a"> -- Option Quatre A</option>
<option value="Opt5">Option Cinq</option>
</select>
 
<input type="submit" value="Envoyer"  />
</form>
</body>
 
</html>

**michelp3** · 28/04/2010, 17h29

Merci SpaceFrog, merci Mathieu 2000

C'est juste çà fonctionne

mais le plus grave ....c'est que le mien aussi fonctionne

En fait , j'avais une parenthèse en trop dans mon code personnel à la fin de la fonction d'affichage resultats

Désolé de vous avoir fait perdre du temps pour si peu mais évidemment ...je l'ignorais

Modif select avec onchange et lecture

JavaScript

Discussions similaires

Partager

Partager