Remplir une liste déroulante en fonction de la sélection dans une autre à l'aide de JavaScript

Lorsque nous sommes confrontés à la tâche de mettre à jour dynamiquement les options dans une liste déroulante en fonction de la sélection effectuée dans une autre, il est essentiel pour éviter les complexités inutiles telles que les requêtes de base de données. Explorons une solution simple basée sur JavaScript qui accomplit cela sans avoir besoin d'appels AJAX.

Pour illustrer cette approche, considérons un scénario dans lequel vous disposez de deux listes déroulantes : la liste déroulante A avec des options telles que "Couleurs", " Formes", "Noms" et la liste déroulante B. Nous souhaitons remplir les options de la liste déroulante B en fonction de la sélection effectuée dans la liste déroulante A.

Exemple Code

La fonction JavaScript suivante montre comment obtenir cette fonctionnalité :

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 
Marquage HTML
Le balisage HTML suivant comprend deux listes déroulantes :
ColoursShapesNames
Usage
Pour utiliser cette fonctionnalité, appelez simplement la fonction configureDropDownLists, en passant la première liste déroulante (ddl1) et la deuxième liste déroulante (ddl2) comme arguments. La fonction gérera le remplissage dynamique du menu déroulant B en fonction de la sélection effectuée dans le menu déroulant A.
Cet extrait de code démontre une solution de travail complète, vous permettant de remplir dynamiquement une liste déroulante en fonction de la sélection effectuée dans une autre à l'aide de JavaScript. , sans avoir besoin d'appels à la base de données ou de requêtes AJAX.