Wenn wir Formulare entwerfen, müssen wir möglicherweise das Auswahl-Dropdown-Optionssteuerelement verwenden. Leider sieht das Standardauswahlsteuerelement im IE-Browser sehr hässlich aus und kann nicht mit Stilen gesteuert werden, ebenso wie Bilder und andere Informationen zu den Optionen hinzugefügt. Heute werde ich anhand von Beispielen erklären, wie man mit CSS und jQuery ein schönes Dropdown-Optionsmenü erstellt.
XHTML
1 |
|
Wie Sie sehen können, verwenden wir div, um das native Select-Tag des Dropdown-Optionssteuerelements zu ersetzen.
CSS
1 2 3 4 5 6 7 8 9 |
|
Reden Sie nicht zu viel über Stile. Sie können die Hintergrundfarbe und Schriftfarbe in CSS und sogar andere willkürlich definierte Stile ändern. Im Anhang befindet sich ein kleines Symbol mit einem Dropdown-Pfeil.
jQuery
Wenn Sie auf „Bitte wählen Sie eine Stadt“ klicken, stellen Sie zunächst fest, ob die Dropdown-Ebene „ul“ angezeigt wird. Wenn ja, blenden Sie die Dropdown-Option aus, andernfalls öffnen Sie die Dropdown-Liste (nach unten schieben). -Down-Option
1 2 3 4 5 6 7 8 |
|
Wenn Sie dann auf die Dropdown-Option klicken, rufen Sie den Optionsinhalt ab und schreiben Sie den Optionsinhalt in das Tag
, und blenden Sie die Dropdown-Option aus.
1 2 3 4 5 |
|
Damit ist ein einfacher Dropdown-Optionsvorgang abgeschlossen, ist das nicht sehr einfach?
Wenn Sie bei der Interaktion mit dem Hintergrund den Wert der Option erhalten möchten, müssen Sie natürlich zuerst XHTML definieren.
1 |
|
Wie Sie dem Code entnehmen können, entspricht das Hinzufügen eines rel-Attributs zum a-Tag und das Zuweisen eines Werts dem Wert des Option-Tags von select . Der nächste Schritt besteht darin, den rel-Wert über jQuery abzurufen. Bitte sehen Sie sich den Code an:
1 2 3 4 5 6 7 |
|
Damit ist ein vollständiger Dropdown-Optionsvorgang abgeschlossen.
Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen.
【Empfohlene verwandte Tutorials】
1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial