Discussion :

[Brunodurant42]

Bonjour à tous,

Je me permets de vous présenter mon problème, je bloque sur un truc.

Sur un page php, je propose deux fois le même menu déroulant comme suit:

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
<label>Choisir un véhicule </label>
<select name="nom1" id="nom1">
<option  value="1">Voiture</option>
<option  value="2">Camion</option>
<option  value="3">Moto</option>
</select><p>
 
<label>Choisir un autre véhicule </label>
<select name="nom2" id="nom2">
<option  value="1">Voiture</option>
<option  value="2">Camion</option>
<option  value="3">Moto</option>
</select>
</p>

J'aimerai que, par exemple, si l'utilisateur choisit "Voiture" dans le menu n° 1, il ne puisse plus choisir cette option dans le menu n°2. Je pensais mettre un message d'erreur, s'il clique à nouveau sur "Voiture", du style "Vous avez précédemment choisi cette option".

Je pense que c'est du JavaScript que je dois faire mais je ne sais pas quelques sont les éléments JavaScript que je dois mobiliser.

Mon objectif est de "m'autoformer", c'est d'apprendre pour pouvoir le refaire après. Est-ce que vous auriez des idées, ou des pistes pour que j'essaye de le faire ?

Merci à tous

A bientôt

Bruno

[Brunodurant42]

Rebonjour,

Alors, j'ai essayé ceci:

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
<label>Choisir un véhicule </label>
<select name="nom1" id="nom1" class="test1" onClick="exclure();">
<option value="0" selected="selected">Choisir</option>
<option value="1">Voiture</option>
<option value="2">Camion</option>
<option value="3">Moto</option>
</select>
<p>
<label>Choisir un autre véhicule </label>
<select name="nom2" id="nom2" class="test2" onClick="exclure();">
<option value="0" selected="selected">Choisir</option>
<option value="1">Voiture</option>
<option value="2">Camion</option>
<option value="3">Moto</option>
</select>

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
function exclure() {
var voiture = 1;
var camion = 2;
var moto = 3;
var checkbox1 = document.getElementsByClassName( "test1" );
var checkbox2 = document.getElementsByClassName( "test2" );
for ( var i = 0; i < checkbox1.length; i++ ) {
for ( var j = 0; j < checkbox2.length; j++ ) {	
if ( checkbox1.item( i ).checked == checkbox2.item( j ).checked ) {
checkbox1.item( i ).checked = false;
checkbox2.item( j ).checked = false;
alert( 'Vous avez déjà choisi cette option.' )
exitFunction = true
 
if ( checkbox1.item( i ).checked != checkbox2.item( j ).checked ) {
checkbox1.item( i ).checked = true;
checkbox2.item( j ).checked = true;
}}}}}

Et ça ne fonction pas, dès que je clique sur n'importe quel des menus déroulants, cela affiche "Vous avez déjà choisi cette option."
Je crois que je ne sais pas (notamment), récupérer la valeur de l'input.

C'est rageant. Si vous avez des idées, des conseils, etc. Je suis preneur

Merci et à bientôt

Bruno

[NoSmoking]

Bonjour,
je te propose de regarder : Suppression d'une option déjà choisie et la discussion associée.

[jreaux62]

Bonjour,

désactiver l'option sélectionnée dans l'autre select (et vice-versa) :

• https://codepen.io/jreaux62/pen/WNZRMwZ

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
// -------------------
window.addEventListener("DOMContentLoaded", (event) => {
  "use strict";
  const sel_1 = document.querySelector('#nom1');
  const sel_2 = document.querySelector('#nom2');
  sel_1.addEventListener('change', (e) => {
    sel_option_disable(sel_2,sel_1.value);
  });
  sel_2.addEventListener('change', (e) => {
    sel_option_disable(sel_1,sel_2.value);
  });
});
// -------------------
// desactiver l option sélectionnée dans l'autre select
function sel_option_disable(sel,val)
{
  //console.log(val);
  sel.querySelectorAll('option').forEach( (opt) => {
    if( opt.value == val && val != '0' )
    {
      opt.setAttribute('disabled', 'disabled');
    } else {
      opt.removeAttribute('disabled');
    }
  });
};
// -------------------

[NoSmoking]

désactiver l'option sélectionnée dans l'autre select (et vice-versa) :

Malheureusement ce n'est pas pris en compte sur les supports tactiles et ce compte-tenu de la différence d’implémentation des <select> sur ceux-ci.

[jreaux62]

...ce n'est pas pris en compte sur les supports tactiles...

OK... Vu. ça craint.

Du coup, si j'en crois ton script, la seule solution est de supprimer l'option du DOM ?

[NoSmoking]

la seule solution est de supprimer l'option du DOM ?

c'est ce que j'ai trouvé de plus pérenne, supprimer ou détacher du DOM mais le résultat effectivement passe par une <option> en moins dans le <select>.

[Brunodurant42]

Bonjour NoSmoking et jreaux62,

Génial, ça marche !!!

Voici ce que j'ai fait. J'ai adapté à mon exemple pour que je puisse manipuler le code et le comprendre.

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
<div>
<h2>1er choix d'option</h2>
<select id="choix1">
<option selected>Véhicules</option>
<option value="1">Voiture</option>
<option value="2">Camion</option>
<option value="3">Moto</option>
<option value="4">Vélo</option>
</select>
</div>
 
<div>
<h2>2ème choix d'option</h2>
<select id="choix2">
<option>Véhicules</option>
</select>
</div>

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
function updateSelect(oChoix1, oChoix2) {
 // récup. <select> dest
 const Choix2Value = oChoix2.value;
 // get selection oSrce
 const ind = oChoix1.selectedIndex;
 // vide le <select> dest
 oChoix2.options.length = 1;
 // création des options
 let i, nb = oChoix1.options.length;
 let oOption;
 for (i = 1; i < nb; i += 1) {
 if (i !== ind) {
 // création de l'option méthode par clonage
 oOption = oChoix1.options[i].cloneNode(true);
 // replace la selection
 if (oOption.value === Choix2Value) {
 oOption.selected = true;}
 // ajout <option>
 oChoix2.add(oOption);}}}
const selectchoix1 = document.getElementById("choix1");
const selectchoix2 = document.getElementById("choix2");
selectchoix1.addEventListener("change", function() {
updateSelect(this, selectchoix2);
selectchoix2.focus();});
// emplissage du <select> destination
updateSelect(selectchoix1, selectchoix2);

J'ai compris l'effacement de l'option dans le 2éme select.

J'ai essayé de créer sur le même principe un 3ème select.

Code html :

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

1
2
3
4
5
6
<div>
<h2>3ème choix d'option</h2>
<select id="choix3">
<option>Véhicules</option>
</select>
</div>

J'ai ajouté, notamment ceci. Mon but est d'enlever pour le 3ème select les options précédemment choisies dans le 1er select et le 2ème select :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.....
 
selectchoix1.addEventListener("change", function() {
updateSelect(this, selectchoix3);
selectchoix3.focus();
}
selectchoix2.addEventListener("change", function() {
updateSelect(this, selectchoix3);
selectchoix3.focus();
}
 
.......

Mais ça ne fonctionne pas. Dans le 3ème select, j'ai juste écrit "véhicules"

Du coup, je me suis trompé et j'ai dû mal comprendre un truc. Et j'aimerai vraiment comprendre pour pouvoir le refaire "tout seul".

Auriez vous une idée ?

Encore merci pour votre aide

A bientôt

Bruno

[jreaux62]

Bonjour,

à ce compte là, tu aurais intérêt à :

• utiliser des checkbox
• contrôler le nombre de cases cochées[/B]

C'est beaucoup plus SIMPLE à gérer.

[NoSmoking]

Du coup, je me suis trompé et j'ai dû mal comprendre un truc

Le principe est « relativement » simple, tu mets à jour le 2^éme à partir du 1^er, le 3^éme à partir du 2^éme et ainsi de suite.

La fonction updateSelect restant la même, il te faut donc boucler sur les <select> concernés pour la mise à jour en cascade.

Voir une version, toute fraîche, qui prend en compte cette mise à jour.
↪ Suppression des options déjà choisies

N'hésite pas si il y a quelque chose que tu ne saisies pas.

[Brunodurant42]

Bonjour

Super merci, ça fonctionne.

Maintenant j'essaie de faire la même chose avec des boutons radio. Je tente

Encore merci

Je mets en résolu

A bientôt

[jreaux62]

Bonjour,

• utiliser des checkbox
• contrôler le nombre de cases cochées[/B]

• Voir : https://codepen.io/jreaux62/pen/WNZEMXQ

N.B.

• <input type="radio" name="truc" /> : un seul choix possible
• <input type="checkbox" name="truc[]" /> : plusieurs choix possibles (à noter les crochets truc[])

[Brunodurant42]

Bonjour jreaux62,

Génial merci.

Alors du coup, j'avais tenté avec des input radio mais pas avec des checkbox.

En fait, je suis en train de réfléchir sur d'autres manipulations. Cette fois, je propose sur un formulaire avec 3 groupes d'input radio. L'utilisateur s'il choisit "Voiture" dans le choix 1, il ne peut plus choisir "Voiture" dans le choix 2. De plus, dans le choix 1, il ne peut faire qu'un choix (voiture ou moto ou camion). C'est le même principe pour choix 2 et choix 3

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<input name="choix1" type="radio"  id="1" value="1" >voiture
<input name="choix1" type="radio"  id="1" value="2" >moto
<input name="choix1" type="radio"  id="1" value="3" >camion
 
<input name="choix2" type="radio"  id="1" value="1" >voiture
<input name="choix2" type="radio"  id="1" value="2" >moto
<input name="choix2" type="radio"  id="1" value="3" >camion
 
<input name="choix3" type="radio"  id="1" value="1" >voiture
<input name="choix3" type="radio"  id="1" value="2" >moto
<input name="choix3" type="radio"  id="1" value="3" >camion

Du coup, j'essaie de rendre "insélectionnable" le input radio relatif à "Voiture" du choix 2 si le mot "voiture" est sélectionné dans le choix 1, etc.

Pour l'instant, je n'y arrive pas mais j'arrive à afficher un message "d'erreur" s'il coche le input radio "voiture" du choix 2.

Mais je cherche, je crois que j'ai trouvé un tuto sur le web qui fait à peu prés cela. Je suis en train de l'étudier

Encore merci

Bruno

[jreaux62]

1- Peux-tu changer ton icône de genre ?
Car une "femme" qui s'appelle "Bruno"... (à moins que... ? )

2- id="1" : un id doit être UNIQUE.
Donc, ton formulaire n'est pas correct.

Cela dit, des id ne sont pas utiles ici.

[Brunodurant42]

oups, j'avais même pas vu que j'étais ... une femme ...

bon ça y est je suis redevenu un homme

Oui, tu as complétement raison, j'ai fait un mauvais copier/coller

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<input name="choix1" type="radio"  id="1" value="1" >voiture
<input name="choix1" type="radio"  id="2" value="2" >moto
<input name="choix1" type="radio"  id="3" value="3" >camion
 
<input name="choix2" type="radio"  id="1" value="1" >voiture
<input name="choix2" type="radio"  id="2" value="2" >moto
<input name="choix2" type="radio"  id="3" value="3" >camion
 
<input name="choix3" type="radio"  id="1" value="1" >voiture
<input name="choix3" type="radio"  id="2" value="2" >moto
<input name="choix3" type="radio"  id="3" value="3" >camion

[jreaux62]

Idem...

• Tu NE PEUX PAS avoirs plusieurs fois id="1".
• Un attribut id DOIT être UNIQUE dans TOUS LE CODE.

Si vraiment tu veux en mettre :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<input name="choix1" type="radio"  id="choix1-1" value="1" >voiture
<input name="choix1" type="radio"  id="choix1-2" value="2" >moto
<input name="choix1" type="radio"  id="choix1-3" value="3" >camion
 
<input name="choix2" type="radio"  id="choix2-1" value="1" >voiture
<input name="choix2" type="radio"  id="choix2-2" value="2" >moto
<input name="choix2" type="radio"  id="choix2-3" value="3" >camion
 
<input name="choix3" type="radio"  id="choix3-1" value="1" >voiture
<input name="choix3" type="radio"  id="choix3-2" value="2" >moto
<input name="choix3" type="radio"  id="choix3-3" value="3" >camion

Là, TOUS les id sont différents.

...Cette fois, je propose sur un formulaire avec 3 groupes d'input radio. L'utilisateur s'il choisit "Voiture" dans le choix 1, il ne peut plus choisir "Voiture" dans le choix 2. De plus, dans le choix 1, il ne peut faire qu'un choix (voiture ou moto ou camion). C'est le même principe pour choix 2 et choix 3

On est d'accord que ça n'a AUCUN intérêt, à part "faire un exercice".

Le script que j'ai proposé (avec checkbox) est plus ergonomique.

[Brunodurant42]

Super merci de ton aide.

En fait, je suis tes conseils, je suis revenu sur des checkbox. C'est vrai que l'intérêt est faible avec des radio.

Merci et à bientôt

Bruno

[NoSmoking]

On est d'accord que ça n'a AUCUN intérêt, à part "faire un exercice".

Mais pas que ..., c'est une façon de gérer une hiérarchisation des choix même si d'autres présentations plus « ergonomiques » peuvent être utilisées, select drag&drop par exemple.