Wie erstelle ich Kontrollkästchen in einer Dropdown-Liste für Mehrfachauswahl?

Kontrollkästchen innerhalb einer Dropdown-Liste erstellen

Beim Erstellen einer Mehrfachauswahl-Dropdown-Liste besteht das Ziel darin, Benutzern die Auswahl mehrerer Optionen aus einer Dropdown-Liste zu ermöglichen Dropdown-Menü. Mit einem einfachen Ansatz wie dem Hinzufügen eines innerhalb eines Tag führt dazu, dass das Kontrollkästchen vor dem Dropdown-Feld angezeigt wird.

Um dieses Problem zu beheben und die Auswahl mehrerer Optionen zu ermöglichen, ist ein ausgefeilterer Ansatz erforderlich. Hier ist eine Lösung, die Kontrollkästchen für jede Option im Dropdown-Menü erstellt:

.dropdown-check-list {
  display: inline-block;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
};

<div><p>Dieser Ansatz verwendet CSS und JavaScript, um eine funktionale Checkliste zu erstellen, die im Dropdown-Menü angezeigt wird. Durch Klicken auf den Anker „Früchte auswählen“ können Benutzer die Liste der Optionen ein- oder ausblenden und mithilfe von Kontrollkästchen mehrere Früchte auswählen.</p></div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich Kontrollkästchen in einer Dropdown-Liste für Mehrfachauswahl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!