Remplir les listes déroulantes en fonction de la sélection

Lors du développement de formulaires avec plusieurs listes déroulantes, il peut être avantageux de remplir les options dans une seule liste déroulante en fonction du sélection faite dans un autre. Cela permet une expérience plus conviviale en limitant les choix et en rendant la saisie des données plus efficace.

Une approche pour obtenir cette fonctionnalité consiste à utiliser JavaScript pour mettre à jour dynamiquement le contenu de la liste déroulante dépendante. Voici un exemple qui montre comment remplir une liste déroulante (B) en fonction de la sélection dans une autre (A) :

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
Cette fonction JavaScript prend deux paramètres, ddl1 et ddl2, qui représentent les deux listes déroulantes. Il initialise d'abord les tableaux avec les options qui seront affichées dans chaque liste déroulante.
Ensuite, une instruction switch est utilisée pour gérer la sélection effectuée dans ddl1. En fonction de la valeur de ddl1, il efface les options de ddl2 et le remplit avec les options appropriées. La fonction createOption est utilisée pour créer et ajouter chaque option à ddl2.
Dans le HTML, deux listes déroulantes doivent être définies :

  
  Colours
  Shapes
  Names



Lorsque l'utilisateur sélectionne une option dans ddl1, l'événement onchange déclenche la fonction configureDropDownLists, qui met à jour les options dans ddl2 en conséquence. Cette approche offre un moyen pratique de remplir une liste déroulante en fonction de la sélection dans une autre, améliorant ainsi la convivialité des formulaires.