Comment créer un menu déroulant avec JavaScript
De nombreux développeurs s'appuient sur Bootstrap à ces fins car il est livré avec des composants intégrés qui peuvent être réutilisés facilement et augmenter la productivité d'un développeur, mais comprendre comment chaque chose fonctionne à elle seule est importante avant de passer à l'utilisation de composants réutilisables. Ici, dans cet article, nous discuterons de la façon de créer un menu déroulant Utilisation de JavaScript.
Menu déroulant avec JavaScript
Nous avons tous vu des menus déroulants et les avons utilisés tout en remplissant divers formulaires en ligne pour sélectionner une ville, un état en particulier ou simplement en choisissant parmi un tas d'options de liste déroulante qui nous sont fournies.
Ce sont des menus bondables qui se composent de plusieurs options à partir desquelles l'utilisateur peut choisir une option particulière. Ces options peuvent être définies dans la liste HTML ou en JavaScript en tant que tableau et elles sont associées à une fonction. Chaque fois qu'un utilisateur clique sur une option, la fonction est déclenchée et une action correspondante se produit.
Points importants pour créer un menu déroulant
Vous pouvez créer un menu déroulant simple avec l'utilisation d'une liste HTML qui utilise le Tag avec le étiqueter. Un ID est fourni à la liste utilisée dans JavaScript pour effectuer l'option sélectionnée par l'utilisateur.
Vous pouvez créer un menu déroulant plus complexe en utilisant principalement JavaScript avec un peu de HTML. Les options seront définies comme un tableau en javascript.
Comprenons chacun de ces éléments mieux avec le code pour une meilleure compréhension.
Menu déroulant simple
Tout d'abord, créez une liste dans HTML en lui fournissant un ID dans une balise de formulaire, nous lui fournissons ici «l'option» en tant qu'ID.
Les options sont définies dans chaque balise et sur le changement, une fonction est appelée.
La fonction est définie dans JavaScript par le nom "DropdownMenu ()" qui se déclenche chaque fois que l'option est sélectionnée.
La dernière chose est qu'une entrée est créée avec ID «Ville» dans laquelle l'option apparaît sélectionnée par l'utilisateur.
Sortir:
Menu déroulant utilisant Div avec JavaScript
Tout d'abord, créez deux divs dans la balise HTML qui déclenche la fonction et affiche le menu à l'écran.
Définissez la liste comme un tableau en javascrip.Méthode createElement () pour créer une liste déroulante par programme dans JavaScript
Ensuite, appelez la méthode appendChild () pour ajouter le menu déroulant à la fin de la liste.
Sortir:
Conclusion
JavaScript est utilisé pour créer divers éléments interactifs sur la page Web afin d'augmenter le comportement dynamique de la page. Dans cet article, nous avons créé un menu déroulant en javascript avec le code. Tout d'abord, un menu déroulant simple a été créé en utilisant HTML et la fonction étant appelée via JavaScript, puis nous l'avons rendu complexe et créé le menu déroulant avec JavaScript et un peu de HTML. Les éléments ont été définis comme un tableau et un menu déroulant a été créé à l'aide de méthodes intégrées. Le code est fourni pour les deux pour votre meilleure compréhension.