Wie kann ich Kontrollkästchen in einem Auswahloptionsmenü mit HTML, CSS und JavaScript simulieren?

Hinzufügen eines Kontrollkästchens zu einem Auswahloptionsmenü

Während es nicht möglich ist, ein Kontrollkästchen direkt in ein Auswahlelement einzubetten, können Sie Folgendes erreichen: ähnliche Funktionalität mit einer Kombination aus HTML, CSS und JavaScript.

HTML Code:

Erstellen Sie einen Div-Container mit der Klasse „Multiselect“, der das Auswahlmenü und die Kontrollkästchen enthält.

Erstellen Sie innerhalb des „Multiselect“-Divs zwei untergeordnete Divs:

1. selectBox: Dieses Div enthält das ausgewählte Element und eine transparente Überlagerung, die es abdeckt die Auswahloption, wenn darauf geklickt wird.
2. Kontrollkästchen:Dieses Div enthält die einzelnen Kontrollkästchen und wird zunächst ausgeblendet.

CSS-Code:

Wenden Sie die folgenden Stile an elements:

• multiselect: Legen Sie eine feste Breite fest, um die Größe des Menüs einzuschränken.
• selectBox: Positionieren Sie das ausgewählte Element und die Überlagerung relativ zum Div.
• overSelect: Verwenden Sie die absolute Positionierung, um die Auswahl abzudecken Option.
• Kontrollkästchen: Blenden Sie die Kontrollkästchen zunächst mit „Anzeige: keine“ aus. Gestalten Sie die Beschriftungen so, dass sie ausgewählten Optionen ähneln.

JavaScript-Code:

Fügen Sie einen Ereignis-Listener zum „selectBox“-Div hinzu, der die Sichtbarkeit der „Kontrollkästchen“ umschaltet " div beim Klicken.

Beispiel Code:

<form>
  <div>

Dieser Code stellt ein Menü „Option auswählen“ mit Kontrollkästchen bereit, die ein- und ausgeschaltet werden können, wenn auf die Auswahloption geklickt wird. Die Kontrollkästchen ahmen das Verhalten ausgewählter Optionen nach, indem sie die ausgewählten Elemente im Menü anzeigen.

Das obige ist der detaillierte Inhalt vonWie kann ich Kontrollkästchen in einem Auswahloptionsmenü mit HTML, CSS und JavaScript simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!