Discussion :

[Marcopololo]

Bonjour,

J'ai deux liste déroulantes Region et Region2 totalement identiques.
Quand une option de Region est choisie je veux la faire disparaitre de la liste déroulante Region2.
Je me suis inspiré d'un code trouvé sur le forum. Et je l'appelle dans le code de Region2 avec onFocus.
Mais cela ne fonctionne pas.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
 
function supprimer_selected_region() {
  var thisId = document.getElementById('Region');
  var selValue = thisId.selectedIndex;
  var optNbre = thisId.options.length;
 
  for (var i = 0; i < optNbre; i++) {
    if (thisId.options[i].value == selValue) {
      thisId.removeChild(thisId.childNodes[i]);
     }
  }}
</script>

Marc G.

[Invité]

Bonjour,

"supprimer" n'est pas la bonne idée (car on peut toujours changer d'option)
Il vaut mieux "désactiver" ('disabled').

Dans cet exemple, le choix dans l'une ou l'autre liste désactive l'option dans l'autre :

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
18
19
20
21
22
<label for="pet-select">Choose a pet:</label>
 
<select name="pets" id="pet-select1">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<br />
<label for="pet-select">Choose an other pet:</label>
<select name="pets" id="pet-select2">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

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
"use strict";
const pet_select1 = document.querySelector('#pet-select1');
const pet_select2 = document.querySelector('#pet-select2');
pet_select1.addEventListener('change', function(){
  change_select(this.value, this.selectedIndex, pet_select2);
});
pet_select2.addEventListener('change', function(){
  change_select(this.value, this.selectedIndex, pet_select1);
});
function change_select( val, index, id )
{
  for(let i=0,lng=id.options.length; i<lng; i++)
  {
    id.options[i].removeAttribute('disabled');
  }
  if( val != '' )
  {
    id.options[index].setAttribute('disabled','disabled');
  }
}

[Marcopololo]

Bon, cela ne fonctionne pas en changeant les constantes et noms des bases. J'ai lu que use strict pouvait parfois poser des problèmes ?
J'ai accès dans ma seconde liste aux mêmes options

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<select name="form[Region][]" id="Region" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true">
<option value=""></option>
<option value="Auvergne Rh&ocirc;ne-Alpes">Auvergne Rh&ocirc;ne-Alpes</option>
<option value="Mayotte">Mayotte</option>
</select>
 
<select name="form[Region2][]" id="Region2" style="width:200px;text-align:center;" class="rsform-select-box form-control" aria-required="true">
<option value=""></option>
<option value="Auvergne Rh&ocirc;ne-Alpes">Auvergne Rh&ocirc;ne-Alpes</option>
<option value="Mayotte">Mayotte</option>
</select>

J'ai volontairement réduit la liste des options qui comprend toutes les régions

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
 
<script type="text/javascript">
"use strict";  
  const opt_region1 = document.querySelector('#Region');
const opt_region2 = document.querySelector('#Region2');
opt_region1.addEventListener('change', function(){
  change_select(this.value, this.selectedIndex, opt_region2);
});
opt_region2.addEventListener('change', function(){
  change_select(this.value, this.selectedIndex, opt_region1);
});
function change_select( val, index, id )
{
  for(let i=0,lng=id.options.length; i<lng; i++)
  {
    id.options[i].removeAttribute('disabled');
  }
  if( val != '' )
  {
    id.options[index].setAttribute('disabled','disabled');
  }
}
</script>

[Invité]

Regarde mieux...

Essaie de sélectionner Mayotte dans les 2 listes...

[Marcopololo]

C'est possible.
Cela pourrait il provenir des options avec des espaces ?

[Invité]

Le code de ton précédent message fonctionne comme voulu.

S'il y a souci, ça vient d'ailleurs.

Place le script JS APRES le formulaire.