Bloquer une possibilité de sélection

Version imprimable

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:

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>

07/11/2009, 08h15
Bovino

Tu peux ajouter une propriété disabled aux options, mais ça ne marchera pas avec IE < 8.
07/11/2009, 12h01
lumycaan

Citation:

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.
09/11/2009, 17h36
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.
09/11/2009, 21h00
lumycaan

Citation:

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

piste

Salut,

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

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

Citation:

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:

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:ccool::ccool:
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?

10/11/2009, 14h16
emmanuel.remy

Citation:

Envoyé par lumycaan

Merci beaucoup:ccool::ccool:
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
10/11/2009, 20h51
lumycaan

Citation:

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:ccool:
10/11/2009, 21h28
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
10/11/2009, 21h36
lumycaan

Citation:

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

Salut,

Petit remaniement pour correspondre à ce que tu veux:

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

Citation:

Envoyé par emmanuel.remy

Salut,

Petit remaniement pour correspondre à ce que tu veux:

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
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:ccool::ccool:c'est tout à fait ce que je souhaitai faire. Merci encore de ta précieuse aide.