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

**Brunodurant42** · 13/12/2021, 22h34

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** · 14/12/2021, 01h00

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** · 14/12/2021, 07h14

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

**jreaux62** · 14/12/2021, 15h15

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