Les cases à cocher peuvent-elles être implémentées dans les options sélectionnées ?

Implémentation des cases à cocher dans les options sélectionnées

Question :

Est-il possible d'incorporer des cases à cocher dans a Menu Sélectionner une option, dans lequel les éléments individuels de la liste incluent à la fois une case à cocher et l'élément nom ?

Réponse :

Bien qu'il ne soit pas directement possible de placer une case à cocher dans un élément de sélection, une fonctionnalité similaire peut être obtenue grâce à une combinaison de HTML, CSS , et JavaScript.

Solution :

1. Créer le menu d'options de sélection :

   <select>
       <option>Select an option</option>
   </select>

2. Créer la case à cocher Liste :

   <div>

3. Afficher et masquer la liste des cases à cocher :

   function showCheckboxes() {
       var checkboxes = document.getElementById("checkboxes");
       if (!expanded) {
           checkboxes.style.display = "block";
           expanded = true;
       } else {
           checkboxes.style.display = "none";
           expanded = false;
       }
   }

4. Style :
   Vous pouvez personnaliser l'apparence de la boîte à choix multiples avec du CSS personnalisé. Par exemple, vous pouvez styliser la case de sélection et la liste des cases à cocher à l'aide du CSS suivant :

   .multiselect { width: 200px; }
   .selectBox { position: relative; }
   .selectBox select { width: 100%; font-weight: bold; }
   .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
   #checkboxes { display: none; border: 1px #dadada solid; }
   #checkboxes label { display: block; }
   #checkboxes label:hover { background-color: #1e90ff; }

5. Utilisation :

   • Cliquer sur sur la case Sélectionner une option affichera la liste des cases à cocher.
   • Sélectionnez les cases à cocher souhaitées et elles seront reflétées dans la case Sélectionner une option sous forme de valeurs séparées par des virgules.

Remarque : Il ne s'agit pas d'une solution HTML/CSS standard, mais elle fournit une solution de contournement pour obtenir la fonctionnalité des cases à cocher. dans un menu Sélectionner une option.

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!