Comment créer une liste déroulante à l'aide de JavaScript?

HTML et CSS sont utilisés pour créer de superbes pages Web, mais lorsque JavaScript est utilisé en combinaison, le résultat est absolument phénoménal. Une chose vraiment cool à propos d'une page Web est ses listes déroulantes. Maintenant, il existe de nombreux frameworks disponibles sur Internet qui permettent à l'utilisateur d'utiliser des listes déroulantes prédéfinies, mais la connaissance des fondamentaux est importante. Cet article montrera comment créer une liste déroulante de base avec l'aide de HTML, CSS et JavaScript.

Étape 1: Configurez le document HTML

Commencez par créer un document HTML et mettant les lignes suivantes dans le fichier HTML:

Choisissez la fabrication de voitures


Porsche
Mercedes
BMW
Audi
Bugatti

Expliquons ce qui se passe ici:

• Un parent est créé avec le id = «ddsection», Plus tard, cette div sera utilisée pour aligner ses éléments enfants en ligne avec ça
• Un bouton est créé qui appelle le ButtonClicked () Méthode lors du clic. Ce bouton sera utilisé pour afficher la liste déroulante.
• Après cela, une autre div est créée avec l'ID «Carmakes», qui va stocker un tas d'options à l'intérieur. Cette div fonctionnera comme un conteneur pour le Tags placés à l'intérieur.

L'exécution du document HTML donne la sortie suivante au navigateur:

Comme il est visible dans la sortie, les éléments de la liste déroulante ne sont pas au bon endroit. Ils devraient être:

• Caché jusqu'à ce que le bouton soit cliqué
• En ligne verticalement avec le bouton car il s'agit d'une liste "déroulante"

Alors, corrigeons cela à l'étape suivante

Étape 2: Fixation des éléments de la liste déroulante avec CSS

Pour démarrer, définissez la propriété d'affichage de la DDDSECTION du parent Div (dont l'ID est DDDSE «Block en ligne», Définir également sa position sur "relatif":

#dddsection
Position: relative;
Affichage: bloc en ligne;

Après cela, ajoutez un style au bouton:

#bouton
rembourrage: 10px 30px;
taille de police: 15px;

Style le conteneur des éléments de la liste et définissez son afficher propriété "aucun" Pour qu'il soit caché au début:

#Carmakes
Affichage: aucun;
largeur min: 185px;

Et enfin, stylisez les éléments de la liste et définissez leur propriété d'affichage sur "aucun", Ils sont donc également cachés au début:

#Carmakes a
bloc de visualisation;
Color en arrière-plan: RVB (181, 196, 196);
rembourrage: 20px;
la couleur noire;
Décoration du texte: aucune;

Le code CSS complet pour cette démonstration:

#dddsection
Position: relative;
Affichage: bloc en ligne;

#bouton
rembourrage: 10px 30px;
taille de police: 15px;

#Carmakes
Affichage: aucun;
largeur min: 185px;

#Carmakes a
bloc de visualisation;
Color en arrière-plan: RVB (181, 196, 196);
rembourrage: 20px;
la couleur noire;
Décoration du texte: aucune;

L'exécution du HTML maintenant créera la sortie suivante sur le navigateur:

Les éléments de la liste sont maintenant masqués, il ne reste plus qu'à basculer leur propriété d'affichage sur bouton Appuyer. Faisons ça à l'étape suivante.

Étape 3: Bascule de la propriété d'affichage avec JavaScript

Dans le fichier javascript, commencez par créer la fonction ButtonClicked (), qui sera exécuté sur la pression du bouton:

fonction boutonClicked ()
// Les lignes de code à venir appartiennent ici

Dans cette fonction, obtenez la référence de la div avec des «carmakes» ID qui est le conteneur des éléments de liste comme:

var conteneur = document.GetElementById ("Carmakes");

Après cela, utilisez le récipient variable à afficher et à masquer la liste déroulante à l'aide de l'instruction if-else et de la propriété d'affichage du caricatures Div:

if (conteneur.style.affiche === "Aucun")
récipient.style.display = "block";
autre
récipient.style.affiche = "aucun";

Le code JavaScript complet pour cette démonstration est:

fonction boutonClicked ()
var conteneur = document.GetElementById ("Carmakes");
if (conteneur.style.affiche === "Aucun")
récipient.style.display = "block";
autre
récipient.style.affiche = "aucun";

Après cela, exécutez simplement le fichier HTML sur un navigateur et cliquez sur le bouton pour afficher et masquer la liste déroulante:

Et la liste déroulante fonctionne parfaitement bien.

Conclusion

La liste déroulante peut être créée avec une combinaison de HTML, CSS et JavaScript. Les listes déroulantes ajoutent à l'esthétique de la page Web. Pour créer une liste déroulante, créez les éléments requis dans le fichier HTML. Dans le fichier CSS, coiffer les éléments et les masquer en utilisant leur afficher propriété. Dans le fichier javascript, basculez la propriété d'affichage sur le bouton cliquer. Dans cet article, la création d'une liste déroulante a été expliquée étape par étape.