Sélectionner une option sans pouvoir la re-sélectionner par la suite

Version imprimable

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:

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

Rebonjour,

Alors, j'ai essayé ceci:

Code:

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:

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

14/12/2021, 07h14
NoSmoking

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

Bonjour,

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

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

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
// -------------------
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');
    }
  });
};
// -------------------

14/12/2021, 16h29
NoSmoking

Citation:

Envoyé par jreaux62

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.
14/12/2021, 16h44
jreaux62

Citation:

Envoyé par NoSmoking

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

OK... Vu. :calim2: ça craint.

Du coup, si j'en crois ton script, la seule solution est de supprimer l'option du DOM ?
14/12/2021, 17h03
NoSmoking

Citation:

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

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:

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:

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:

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:

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

14/12/2021, 23h55
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.
15/12/2021, 13h49
NoSmoking

Citation:

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.
21/12/2021, 16h13
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
21/12/2021, 16h17
jreaux62
Bonjour,
Citation:
Envoyé par jreaux62

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[])

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:

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

21/12/2021, 16h56
jreaux62

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

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

Cela dit, des id ne sont pas utiles ici.

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:

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

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:

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.

Citation:

Envoyé par Brunodurant42

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

22/12/2021, 10h43
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
22/12/2021, 12h01
NoSmoking

Citation:

Envoyé par jreaux62

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.