Bloquer une possibilité de sélection

**lumycaan** · 06/11/2009, 21h30

Bonsoir,

Je souhaiterai créer un script où il y a plusieurs formulaires contenants les mêmes choix, mais je voudrais que si l'on choisi un élément dans un des formulaires, il apparisse "grisé" dans les autres sans possibilité de pouvoir le sélectionner.
Je veux, par exemple, que lorsque quand j'ai sélectionné le "choix 1" dans mon premier formulaire, il ne soit plus accessible (mais qu'il soit visible en "grisé") dans mes 2 autres formulaires.
Merci de votre aide.

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
<form  method="post">
<p>
<u>form n°1:</u>
<select>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
<p>
<u>form n°2:</u>
<select>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
 
<u>form n°3:</u>
<select>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
</form>

**Bovino** · 07/11/2009, 08h15

Tu peux ajouter une propriété disabled aux options, mais ça ne marchera pas avec IE < 8.

**lumycaan** · 07/11/2009, 12h01

Envoyé par Bovino

Tu peux ajouter une propriété disabled aux options, mais ça ne marchera pas avec IE < 8.

c'est génant tout de même. Tout le monde n'a pas IE 8.

**SPACHFR** · 09/11/2009, 17h36

Tu pourrais via une fonction recupérer l'entrée choisie dans ta liste 1 et en fonction du choix modifier la couleur du choix( .style.color=) (gris claire) correspondant dans les autres listes (pour émuler un disabled visuel)

Ensuite sur l'action à realiser tu test la couleur attribuée à l'option et si elle correspond au gris claire tu ne fais rien.

**lumycaan** · 09/11/2009, 21h00

Envoyé par SPACHFR

Tu pourrais via une fonction recupérer l'entrée choisie dans ta liste 1 et en fonction du choix modifier la couleur du choix( .style.color=) (gris claire) correspondant dans les autres listes (pour émuler un disabled visuel)

Ensuite sur l'action à realiser tu test la couleur attribuée à l'option et si elle correspond au gris claire tu ne fais rien.

Je comprends ce que tu veux faire mais je suis plus que débutant en javascript, et je ne sais pas créer le code relatif à ta proposition. Un petit coup de main serait le bienvenu

**emmanuel.remy** · 10/11/2009, 02h27

Salut,

Vite fait comme démo de ce que cela pourrait donner d'après l'idée de SPACHFR:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
 
  /**
   * Met à jour les listes à chaque sélection (un peu brut mais vite fait donc ...
   */
  function majListes() {
    var frm = document.form1;
    //pSel1, pSel2, pSel3 sont les listes déroulantes
    //On parcourt une liste et on observe la sélection ou pas de l'élément
   //dans les deux autres listes: si sélectionné, alors on le met en grisé
    var f = function(pSel1, pSel2, pSel3) {
      for (var i=1; i<pSel1.options.length;i++) 
        if (i==pSel2.options.selectedIndex || i==pSel3.options.selectedIndex) { 
          pSel1.options[i].style.color="#C0C0C0";
        } else {
          pSel1.options[i].style.color="black";
        }
 
    };
    //on applique par permutation pour chaque liste
    f(frm.sel1, frm.sel2,frm.sel3);
    f(frm.sel2, frm.sel1,frm.sel3);
    f(frm.sel3, frm.sel1,frm.sel2);
 
    //affichage du message si deux mêmes index sont sélectionnés
    var sels = [frm.sel1.options.selectedIndex, 
                frm.sel2.options.selectedIndex, 
                frm.sel3.options.selectedIndex];
    if ((sels[0]==sels[1] && sels[0] !=0)  ||
        (sels[0]==sels[2] && sels[0] !=0)  ||
        (sels[1]==sels[2] && sels[2] !=0)
        ) document.getElementById("msg").innerHTML= "Valeur choisie dupliquée";
        else  
          document.getElementById("msg").innerHTML= "";
  }
 
  </script>
 
  </head>
  <body>
<form  method="post" name="form1">
<p>
<u>form n°1:</u>
<select name="sel1" onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
<p>
<u>form n°2:</u>
<select name="sel2"  onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
 
<u>form n°3:</u>
<select name="sel3"  onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
</form>
 
<div id="msg" style="background-color:red;color:yellow;width:400px"></div>
  </body>
</html>

ERE

**lumycaan** · 10/11/2009, 13h32

Envoyé par emmanuel.remy

Salut,

Vite fait comme démo de ce que cela pourrait donner d'après l'idée de SPACHFR:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
 
  /**
   * Met à jour les listes à chaque sélection (un peu brut mais vite fait donc ...
   */
  function majListes() {
    var frm = document.form1;
    //pSel1, pSel2, pSel3 sont les listes déroulantes
    //On parcourt une liste et on observe la sélection ou pas de l'élément
   //dans les deux autres listes: si sélectionné, alors on le met en grisé
    var f = function(pSel1, pSel2, pSel3) {
      for (var i=1; i<pSel1.options.length;i++) 
        if (i==pSel2.options.selectedIndex || i==pSel3.options.selectedIndex) { 
          pSel1.options[i].style.color="#C0C0C0";
        } else {
          pSel1.options[i].style.color="black";
        }
 
    };
    //on applique par permutation pour chaque liste
    f(frm.sel1, frm.sel2,frm.sel3);
    f(frm.sel2, frm.sel1,frm.sel3);
    f(frm.sel3, frm.sel1,frm.sel2);
 
    //affichage du message si deux mêmes index sont sélectionnés
    var sels = [frm.sel1.options.selectedIndex, 
                frm.sel2.options.selectedIndex, 
                frm.sel3.options.selectedIndex];
    if ((sels[0]==sels[1] && sels[0] !=0)  ||
        (sels[0]==sels[2] && sels[0] !=0)  ||
        (sels[1]==sels[2] && sels[2] !=0)
        ) document.getElementById("msg").innerHTML= "Valeur choisie dupliquée";
        else  
          document.getElementById("msg").innerHTML= "";
  }
 
  </script>
 
  </head>
  <body>
<form  method="post" name="form1">
<p>
<u>form n°1:</u>
<select name="sel1" onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
<p>
<u>form n°2:</u>
<select name="sel2"  onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
 
<u>form n°3:</u>
<select name="sel3"  onchange="majListes();">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
</form>
 
<div id="msg" style="background-color:red;color:yellow;width:400px"></div>
  </body>
</html>

ERE

Merci beaucoup

C'est à 99.99% ce que je souhaite faire. Existe-t-il un moyen de ne pas permettre la sélection du "choix" en même temps que la passage en gris des sélections?

**emmanuel.remy** · 10/11/2009, 14h16

Envoyé par lumycaan

Merci beaucoup

C'est à 99.99% ce que je souhaite faire. Existe-t-il un moyen de ne pas permettre la sélection du "choix" en même temps que la passage en gris des sélections?

N'interdit rien, sinon cela devient très contraignant (voire énervant) pour l'utilisateur..

ERE

**lumycaan** · 10/11/2009, 20h51

Envoyé par emmanuel.remy

N'interdit rien, sinon cela devient très contraignant (voire énervant) pour l'utilisateur..

ERE

Le pb c'est que c'est pour mettre dans un jeu de foot, dans la partie remplacement des joueurs en cours de match. si le coach utilise son premier remplaçant (choix 1), il ne doit pas pouvoir y avoir accès lors des 2ème et 3ème changements, puisqu'il a déjà été utilisé.

Merci de ton aide

**emmanuel.remy** · 10/11/2009, 21h28

Ok, mais est ce que cela veut dire qu'on ne peut plus revenir sur un choix une fois qu'il a été effectué; id est une fois choisi le premier remplaçant ne peut être modifié ?

ERE

**lumycaan** · 10/11/2009, 21h36

Envoyé par emmanuel.remy

Ok, mais est ce que cela veut dire qu'on ne peut plus revenir sur un choix une fois qu'il a été effectué; id est une fois choisi le premier remplaçant ne peut être modifié ?

ERE

non, il est toujours possible de modifier son choix. Je souhaite simplement que si le choix 1 est sélectionné pour le premier changement, il ne soit plus disponible pour les choix 2 et 3, mais reste modifiable au niveau du choix 1 (je prévoi un liste de 5 possibilités de choix de joueurs différents mais seulement 3 possibilités de remplacement.
J'espère être assez clair dans mes explications

**emmanuel.remy** · 10/11/2009, 23h31

Salut,

Petit remaniement pour correspondre à ce que tu veux:

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
77
78
79
80
81
82
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
 
  /**
   * Met à jour les listes à chaque sélection (un peu brut mais vite fait donc ...
   */
  function majListes(liste) {
    var frm = document.form1;
 
    //pSel1, pSel2, pSel3 sont les listes déroulantes
    //On parcourt une liste et on observe la sélection ou pas de l'élément
   //dans les deux autres listes: si sélectionné, alors on le met en grisé
    var f = function(pSel1, pSel2, pSel3) {
      for (var i=1; i<pSel1.options.length;i++) 
        if (i==pSel2.selectedIndex || i==pSel3.selectedIndex) { 
          pSel1.options[i].style.color="#C0C0C0";
        } else {
          pSel1.options[i].style.color="black";
        }
 
    };
 
    //la liste des index sélectionnés
    var sels = [frm.sel1.selectedIndex, 
                frm.sel2.selectedIndex, 
                frm.sel3.selectedIndex];
 
    //l'indice de l'élément sélectionné dans le tableau
    var idx = (liste==frm.sel1 ? 0 : (liste==frm.sel2 ? 1 : 2));
    //y a-t-il un pb dans les listes ? Oui si l'élément sélectionné dans la liste 
    //l'est aussi dans une autre des deux listes
    var pb = (sels[idx]==sels[(idx+1) % 3] || sels[idx]==sels[(idx+2) % 3]);
 
    //si problème alors on remet le choix par défaut
    if (liste.selectedIndex > 0 && pb)  liste.selectedIndex = 0;
 
    //on applique par permutation pour chaque liste
    f(frm.sel1, frm.sel2,frm.sel3);
    f(frm.sel2, frm.sel1,frm.sel3);
    f(frm.sel3, frm.sel1,frm.sel2);
 
    //affichage du message si deux mêmes index sont sélectionnés
    document.getElementById("msg").innerHTML= pb ? "Valeur choisie dupliquée": "";
  }
 
  </script>
 
  </head>
  <body>
<form  method="post" name="form1">
<p>
<u>form n°1:</u>
<select name="sel1" onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
<p>
<u>form n°2:</u>
<select name="sel2"  onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
 
<u>form n°3:</u>
<select name="sel3"  onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
</form>
 
<div id="msg" style="background-color:red;color:yellow;width:400px"></div>
  </body>
</html>

ERE

**lumycaan** · 11/11/2009, 15h07

Envoyé par emmanuel.remy

Salut,

Petit remaniement pour correspondre à ce que tu veux:

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
77
78
79
80
81
82
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
 
  /**
   * Met à jour les listes à chaque sélection (un peu brut mais vite fait donc ...
   */
  function majListes(liste) {
    var frm = document.form1;
 
    //pSel1, pSel2, pSel3 sont les listes déroulantes
    //On parcourt une liste et on observe la sélection ou pas de l'élément
   //dans les deux autres listes: si sélectionné, alors on le met en grisé
    var f = function(pSel1, pSel2, pSel3) {
      for (var i=1; i<pSel1.options.length;i++) 
        if (i==pSel2.selectedIndex || i==pSel3.selectedIndex) { 
          pSel1.options[i].style.color="#C0C0C0";
        } else {
          pSel1.options[i].style.color="black";
        }
 
    };
 
    //la liste des index sélectionnés
    var sels = [frm.sel1.selectedIndex, 
                frm.sel2.selectedIndex, 
                frm.sel3.selectedIndex];
 
    //l'indice de l'élément sélectionné dans le tableau
    var idx = (liste==frm.sel1 ? 0 : (liste==frm.sel2 ? 1 : 2));
    //y a-t-il un pb dans les listes ? Oui si l'élément sélectionné dans la liste 
    //l'est aussi dans une autre des deux listes
    var pb = (sels[idx]==sels[(idx+1) % 3] || sels[idx]==sels[(idx+2) % 3]);
 
    //si problème alors on remet le choix par défaut
    if (liste.selectedIndex > 0 && pb)  liste.selectedIndex = 0;
 
    //on applique par permutation pour chaque liste
    f(frm.sel1, frm.sel2,frm.sel3);
    f(frm.sel2, frm.sel1,frm.sel3);
    f(frm.sel3, frm.sel1,frm.sel2);
 
    //affichage du message si deux mêmes index sont sélectionnés
    document.getElementById("msg").innerHTML= pb ? "Valeur choisie dupliquée": "";
  }
 
  </script>
 
  </head>
  <body>
<form  method="post" name="form1">
<p>
<u>form n°1:</u>
<select name="sel1" onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
<p>
<u>form n°2:</u>
<select name="sel2"  onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
 
<u>form n°3:</u>
<select name="sel3"  onchange="majListes(this);">
<option value="-1"> (Faire un choix) </option>
<option value="1"> choix 1 </option>
<option value="2"> choix 2 </option>
<option value="3"> choix 3 </option>
</select>
</p>
</form>
 
<div id="msg" style="background-color:red;color:yellow;width:400px"></div>
  </body>
</html>

ERE

Merci beaucoup

c'est tout à fait ce que je souhaitai faire. Merci encore de ta précieuse aide.

Bloquer une possibilité de sélection

JavaScript

Discussions similaires

Partager

Partager