Wie erstelle ich ein Kontrollkästchen innerhalb einer Auswahloption mit HTML, CSS und JavaScript?

Kontrollkästchen innerhalb der Auswahloption: Eine Lösung mit HTML, CSS, JavaScript

Das direkte Hinzufügen eines Kontrollkästchens innerhalb eines Auswahloptionsmenüs ist nicht möglich. Eine ähnliche Funktionalität kann jedoch durch eine Problemumgehung mit HTML, CSS und JavaScript erreicht werden.

Erstellen der Schnittstelle

HTML und CSS erstellen ein Auswahloptionsmenü mit ein zusätzliches anklickbares Div, das eine Liste von Kontrollkästchen ein- und ausblendet. Das Div ahmt das Erscheinungsbild eines Auswahloptionsmenüs nach und schaltet beim Klicken die Sichtbarkeit der Kontrollkästchen um.

JavaScript-Logik

Die JavaScript-Funktion schaltet die Anzeigeeigenschaft des um Kontrollkästchen-Container, der sicherstellt, dass er basierend auf der Interaktion des Benutzers mit dem Auswahlfeld-Div sichtbar oder ausgeblendet ist.

Beispielimplementierung:

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

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

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

Dieser Ansatz bietet die gewünschte Funktionalität eines Auswahloptionsmenüs mit integriertem Kontrollkästchen und bietet so eine größere Flexibilität bei der Formulargestaltung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Kontrollkästchen innerhalb einer Auswahloption mit HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!