Gewusst wie: Verknüpfen Sie eine HTML-Schaltfläche mit einer Dropdown-Box

October 20

Website-Besucher klicken Sie in der Regel Dropdown-Felder, um sie zu öffnen. Entwickler dieser kompakte Steuerelemente platzieren, wählen Sie auch Kästen, auf Webseiten um Speicherplatz zu sparen. Bis ein Benutzer ein Dropdown-Listenfeld klickt, belegt es nur eine Zeile auf einer Webseite, obwohl es Hunderte von Elementen enthalten kann. Wenn Sie Benutzer geben die Möglichkeit zum Öffnen und schließen ein Dropdown-Feld eine HTML-Schaltfläche verwenden möchten, verknüpfen Sie diese beiden Steuerelemente, die mithilfe einer JavaScript-Funktion.

Anweisungen

1 Starten Sie einen HTML-Editor oder einem beliebigen Texteditor, und öffnen Sie eines Ihrer HTML-Dokumente.

2 Fügen Sie folgenden Code zum Body-Abschnitt des Dokuments:

< select Id = "dropDownBox1" >

< Option > A < / option >

< Option > B < / option >

< Option > C < / option >

< Option > D < / option >

< / select >

< Eingang Typ = "Knopf" Value = "Offene Drop Down" Onclick = "OpenDropdown ('dropDownBox1', '3')" / >

Dieser Code erstellt ein Dropdown-Listenfeld und eine Schaltfläche. Wenn Sie auf die Schaltfläche klicken, wird eine JavaScript-Funktion mit dem Namen OpenDropdown. Die Schaltfläche übergibt auch das Dropdown-Feld-Id-Wert der Funktion zusammen mit der Zahl 3.

3 Fügen Sie den folgenden JavaScript-Code in den Head-Abschnitt des Dokuments:

Funktion OpenDropdown (DropDown, Size) {}

Var DropDownObject = document.getElementById(dropDown);

dropDownObject.size = Größe;

}

Diese Funktion--durch die Schaltfläche--erhält einen Verweis auf das Dropdown-Feld und legt den Größenwert auf die Größe an die Funktion in der Argumentliste übergeben.

4 Speichern Sie das Dokument, und starten Sie Ihren Browser. Öffnen Sie das Dokument im Browser. Dropdown Feld wird über die Schaltfläche auf der Webseite angezeigt.

5 Klicken Sie auf. Der Code läuft und Dropdown Feld automatisch öffnet.

Tipps & Warnungen

  • Beachten Sie, dass die Schaltfläche Click-Ereignis die Nummer 3 der JavaScript-Funktion übergibt, obwohl vier Elemente im Dropdown Feld vorhanden sind. Beim Aufrufen der Funktion auf einer echten Webseite übergeben Sie alle Werte, die Sie mögen. Sie müssen keinen Wert übergeben, der gleich der Anzahl der Elemente in dem Dropdownfeld. Sie könnten auch eine andere Schaltfläche hinzufügen, die das Dropdown-Feld beim Klicken auf schließt. Erstellen Sie eine solche Schaltfläche Duplizieren des Button-Codes in den vorherigen Schritten beschrieben und übergeben Null an die JavaScript-Funktion anstelle von 3.

SIE KÖNNEN AUCH GERNE