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.

[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 ?

[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

[Invité]

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

Pour la "masquer" visuellement, ajoute :

Code css :

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

option[disabled="disabled"] { display:none; }

[Marcopololo]

Bonjour jreaux62.

Et bien cela ne fonctionne pas mieux.

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

[NoSmoking]

Bonjour,
au passage si tu pouvais nous donner des nouvelles sur tes discussions récentes restées en suspend

• Soustraire une date d'un élément calendrier
• Fonction readonly dans champ
• Gestion année N+1 dans contrôle date

[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é :

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.

[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 :

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

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

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 :

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

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

L’évènement load est émis lorsqu’une ressource et ses ressources dépendantes sont complètement chargées.

[Marcopololo]

Effectivement cela marche beaucoup mieux.

Merci de ta patience.