Comment puis-je simuler la fonctionnalité d'une case à cocher dans un menu déroulant de sélection ?

Implémentation de la fonctionnalité de case à cocher dans les menus d'options de sélection

Malgré l'impossibilité d'inclure nativement des cases à cocher dans les menus d'options de sélection, il existe une solution de contournement intelligente utilisant HTML , CSS et JavaScript.

Code Implémentation :

1. HTML :

   • Créez un formulaire contenant un div à sélection multiple avec une liste déroulante "Sélectionner une option".
   • Définissez un div caché nommé "checkboxes" contenant des étiquettes de cases à cocher individuelles en utilisant l'attribut for pour les lier à leur cases à cocher.

2. CSS :

   • Stylez les éléments multiselect, selectBox, overSelect et checkboxes pour l'apparence souhaitée et flotter effets.

3. JavaScript :

   • Définissez une fonction showCheckboxes() pour basculer la visibilité des cases à cocher div en cliquant sur le selectBox.

Explication :

Le div multisélection fait office de menu d'options de sélection. Lorsqu'elle est cliquée, la fonction showCheckboxes() affiche ou masque les cases à cocher div. Chaque étiquette de case à cocher représente une option dans la liste déroulante. Le survol d'une étiquette la surligne dans une couleur différente, fournissant un retour visuel similaire à une case à cocher cochée.

Remarque :
Bien que cette solution permette une fonctionnalité de case à cocher dans les menus d'options de sélection, il ne fournit pas les fonctionnalités d'accessibilité natives des éléments de case à cocher.

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!