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

Incorporation d'une case à cocher dans une option de sélection

L'incapacité d'intégrer une case à cocher directement dans un menu d'option de sélection présente un défi face à des conceptions qui nécessitent cette fonctionnalité. Cependant, il est possible d'obtenir quelque chose de similaire en utilisant une combinaison de HTML, CSS et JavaScript.

Implémentation

1. Structure HTML : Créez un div avec le classe "multisélection". Dans ce div, incluez un élément select et un div avec la classe "overSelect" positionné de manière absolue pour couvrir l'élément select. De plus, créez un autre div avec l'identifiant "cases à cocher" qui contiendra les options des cases à cocher.
2. Style CSS : Stylisez l'élément de sélection pour avoir du texte en gras et appliquez des styles visuels au "overSelect" div pour imiter l’apparence d’une option de sélection. Définissez des styles pour le div « cases à cocher » pour contrôler sa visibilité et sa mise en page.
3. Fonctionnalité JavaScript : Utilisez JavaScript pour basculer la visibilité du div « cases à cocher » lors d'un événement de clic.

Code

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Select an option</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div>

var expanded = false;

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

.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;
}

Cette solution permet de fermer approximation d'une fonctionnalité de type case à cocher dans un menu Sélectionner une option. Cependant, il est important de noter qu'il s'écarte du comportement standard d'un élément Select 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!