Wie kann ich die Checkbox-Funktionalität in einem Dropdown-Menü „Auswählen' simulieren?

Implementieren der Kontrollkästchenfunktionalität in Auswahloptionsmenüs

Obwohl es nicht möglich ist, Kontrollkästchen nativ in Auswahloptionsmenüs einzubinden, gibt es eine clevere Problemumgehung mithilfe von HTML , CSS und JavaScript.

Code Implementierung:

1. HTML:

   • Erstellen Sie ein Formular, das ein Multiselect-Div mit einem Dropdown-Menü „Option auswählen“ enthält.
   • Definieren Sie ein verstecktes Div namens „checkboxes“, das einzelne Kontrollkästchenbezeichnungen enthält, indem Sie das for-Attribut verwenden, um sie mit ihren zu verknüpfen Kontrollkästchen.

2. CSS:

   • Gestalten Sie die Elemente „Multiselect“, „SelectBox“, „OverSelect“ und „Kontrollkästchen“ für das gewünschte Erscheinungsbild und schweben Effekte.

3. JavaScript:

   • Definieren Sie eine showCheckboxes()-Funktion, um die Sichtbarkeit der Kontrollkästchen-Div beim Klicken umzuschalten Die selectBox.

Erklärung:

Das Multiselect-Div fungiert als Auswahloptionsmenü. Wenn darauf geklickt wird, zeigt die Funktion showCheckboxes() die Kontrollkästchen-Div entweder an oder verbirgt sie. Jede Kontrollkästchenbezeichnung stellt eine Option im Dropdown dar. Wenn Sie mit der Maus über ein Etikett fahren, wird es in einer anderen Farbe hervorgehoben und bietet ein visuelles Feedback ähnlich einem aktivierten Kontrollkästchen.

Hinweis:
Während diese Lösung die Kontrollkästchenfunktion innerhalb ausgewählter Optionsmenüs ermöglicht, Es bietet nicht die nativen Barrierefreiheitsfunktionen von Kontrollkästchenelementen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Checkbox-Funktionalität in einem Dropdown-Menü „Auswählen' simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!