Suppression option liste déroulante par rapport à une autre liste

Version imprimable

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:

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.

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:

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:

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

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:

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:

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>

20/03/2020, 12h11
Invité

Regarde mieux...

Essaie de sélectionner Mayotte dans les 2 listes...
20/03/2020, 12h24
Marcopololo

1 pièce(s) jointe(s)

C'est possible.
Cela pourrait il provenir des options avec des espaces ?
20/03/2020, 12h25
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.
20/03/2020, 14h40
Marcopololo

Je vais modifier pour que la fonction ne fonctionne que dans un sens pour voir ce que cela donne. De toute façon Région2 n'apparait que si Région est rempli.

Je viens de me rendre compte que j'ai un message d'erreur : TypeError: opt_region1 is null

Effectivement au départ ma zone de liste déroulante est vide. Es ce que cela pour empêcher le script de démarrer ?
20/03/2020, 16h19
Marcopololo

Je viens de recopier à l'identique le code que tu as mis au départ pour le tester dans un formulaire totalement vierge et cela ne fonctionne pas, je ne masque pas l'option déjà utilisée ?

Marc
20/03/2020, 17h35
Invité

Mon code "désactive" l'option, il ne la "masque" pas.

Pour la "masquer" visuellement, ajoute :

Code:

option[disabled="disabled"] { display:none; }
21/03/2020, 08h28
Marcopololo

Bonjour jreaux62.

Et bien cela ne fonctionne pas mieux.
21/03/2020, 09h14
Invité

Bonjour,

0- Mon code fonctionne : https://codepen.io/jreaux62/pen/PoqBrYx

1- on ne peut rien dire de plus avec le PEU de code que tu montres (et une copie d'écran n'apporte rien ici).

2- Regarde dans la console (touche F12 -> Console) si tu as des erreurs JS...
21/03/2020, 09h33
NoSmoking
Bonjour,
au passage si tu pouvais nous donner des nouvelles sur tes discussions récentes restées en suspend
22/03/2020, 07h32
Marcopololo

Bonjour,

Désolé, j'ai mis à jour et les codes fonctionnels par rapport à mes questions.

Pour le code, je te fais confiance, mais chez moi j'ai cette erreur qui apparait en ayant repris exactement le code que tu m'as donné :

Citation:

TypeError: pet_select1 is null
<anonyme> https://champfrance.soinsenergie.fr/index.php?option=com_rsform&view=rsform&formId=11:408

C'est exactement la même erreur que j'ai quand j'adapte le code.. Je continue à chercher

Marc G.
22/03/2020, 07h35
Invité
Bonjour,

il faut que le code JS soit APRÈS le code HTML (je l'ai déjà dit dans mon message #6).

Sinon, il faut l'encadrer de DOMContentLoaded :
Code:

1 2 3 4 5 6 <script> window.addEventListener("DOMContentLoaded", (event) => { // ici le code JS // ..... }); </script>
Citation:

L’évènement DOMContentLoaded est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.

A la différence de load :
Code:

1 2 3 4 5 6 <script> window.addEventListener("load", (event) => { // ici le code JS // ..... }); </script>
Citation:

L’évènement load est émis lorsqu’une ressource et ses ressources dépendantes sont complètement chargées.
22/03/2020, 08h05
Marcopololo

Effectivement cela marche beaucoup mieux.

Merci de ta patience.