Comment remplir une liste déroulante en fonction d'une sélection dans une autre à l'aide de JavaScript ?

Remplir une liste déroulante en fonction de la sélection dans une autre

Lorsque vous travaillez avec des listes déroulantes, il est souvent nécessaire de modifier le contenu d'une liste déroulante en fonction sur la sélection dans un autre. En JavaScript, cela peut être réalisé sans avoir besoin de requêtes dans la base de données. Voici un exemple de comment procéder :

Le code fourni est divisé en deux fonctions :

1. configureDropDownLists(ddl1, ddl2) : Cette fonction prend deux arguments, qui sont les deux listes déroulantes qui seront liées. Il utilise la valeur de la première liste déroulante (ddl1) pour déterminer les options à remplir dans la deuxième liste déroulante (ddl2).
2. createOption(ddl, text, value) : Cette fonction d'assistance crée un élément d'option pour la liste déroulante et l'ajoute à la collection d'options de la liste déroulante.

Dans l'exemple de code HTML, nous avons deux listes déroulantes : ddl1 et ddl2. Lorsqu'un utilisateur sélectionne une option dans la liste déroulante ddl1, l'événement onchange est déclenché, qui appelle la fonction configureDropDownLists().

La fonction configureDropDownLists() efface d'abord les options de ddl2, puis ajoute de nouvelles options en fonction de la valeur sélectionnée dans ddl1. Par exemple, si l'utilisateur sélectionne « Couleurs » dans ddl1, la fonction remplit ddl2 avec des options de couleurs telles que « Noir », « Blanc » et « Bleu ».

En suivant le code fourni, vous pouvez facilement remplissez une liste déroulante en fonction de la sélection dans une autre sans avoir besoin de requêtes de base de données complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!