Modif select avec onchange et lecture

Version imprimable

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:

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>

26/04/2010, 17h22
SpaceFrog

Code:

onsubmit="return resultats()"

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:

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

Code:

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

27/04/2010, 14h27
SpaceFrog

Code:

alert("choix : " + resul[i].selected.value + " " + document.someForm.selectOpts[document.someForm.selectOpts.selectedIndex].innerHTML);
27/04/2010, 16h32
michelp3

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
27/04/2010, 16h41
SpaceFrog

pour la selection multiple il faut boucler sur les option et tester si il sont selected ...
28/04/2010, 10h06
michelp3

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 !!!
28/04/2010, 10h50
SpaceFrog

Citation:

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

il y a un rechargement de page ???
28/04/2010, 11h49
michelp3

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 ?
28/04/2010, 12h01
SpaceFrog

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

Voici donc le code complet

Code:

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:

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:

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>

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

28/04/2010, 13h20
michelp3

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.

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:

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>

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

28/04/2010, 17h29
michelp3

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