Comment puis-je simuler des cases à cocher dans un menu d'options de sélection à l'aide de HTML, CSS et JavaScript ?

Ajout d'une case à cocher à un menu d'options de sélection

Bien qu'il ne soit pas possible d'intégrer directement une case à cocher dans un élément de sélection, vous pouvez obtenir un fonctionnalité similaire utilisant une combinaison de HTML, CSS et JavaScript.

HTML Code :

Créez un conteneur div avec une classe de "multiselect" qui contiendra le menu de sélection et les cases à cocher.

Dans le div "multiselect", créez deux div enfants :

1. selectBox : Ce div contiendra l'élément select et une superposition transparente qui couvre l'option de sélection lorsque vous cliquez dessus.
2. cases à cocher : Ce div contiendra les cases à cocher individuelles et sera initialement masqué.

Code CSS :

Appliquez les styles suivants au elements :

• multiselect : Définissez une largeur fixe pour limiter la taille du menu.
• selectBox : Positionnez l'élément de sélection et la superposition par rapport au div.
• overSelect : Utilisez le positionnement absolu pour couvrir la sélection option.
• cases à cocher : Masquez initialement les cases à cocher en utilisant "affichage : aucun". Stylisez les étiquettes pour qu'elles ressemblent aux options de sélection.

Code JavaScript :

Ajoutez un écouteur d'événement au div "selectBox" qui bascule la visibilité des "cases à cocher". " div lorsque vous cliquez dessus.

Exemple Code :

<form>
  <div>

Ce code fournira un menu d'options de sélection avec des cases à cocher qui peuvent être activées et désactivées lorsque l'option de sélection est cliquée. Les cases à cocher imiteront le comportement des options de sélection en affichant les éléments sélectionnés dans le menu.

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!