Mit dem wenig bekannten Konstruktor JavaScript Option() können Sie die ausführliche Syntax beim Erstellen von DOM-Elementen vermeiden
Wir alle lieben jQuery. Zu den vielen großartigen Eigenschaften dieser Bibliothek gehört die Möglichkeit, DOM-Elemente einfach zu erstellen und im Dokument zu platzieren, ohne die normalerweise ausführliche Syntax von nativem JavaScript.
Es gibt jedoch eine wenig bekannte Funktion von JavaScript, mit der Sie Optionselemente mit relativ geringem Aufwand erstellen können. Diese Funktion ist der Konstruktor Option(). Die Syntax ist einfach:
- Abrufen eines Verweises auf ein Formularelement
- Instanziieren Sie den Konstruktor und verknüpfen Sie das zurückgegebene Objekt mit dem Formularelement
- Übergeben Sie während der Instanziierung die folgenden Argumente: 1) der auf der Seite angezeigte Text, 2) der Wert des Steuerelements , 3) Wenn es sich um die Standardauswahl handelt und wenn es ausgewählt ist
Beispiel # 1
In Beispiel # 1 haben wir ein einfaches Formular, das ein Auswahlsteuerelement enthält. Im Markup gibt es drei Optionen: „Montag“, „Dienstag“ und „Mittwoch“. Wenn das JavaScript ausgeführt wird, finden die folgenden Aktionen statt:
- Wir erhalten einen Verweis auf die Select-Steuerelemente („w“)
- Wir löschen alle Optionselemente (w.length = 0)
- Wir erstellen ein Array von Objekten mit jeweils zwei Eigenschaften („d“)
- Wir durchlaufen das Array und erstellen für jedes Array-Element dynamisch ein neues select-Element mit den Eigenschaften „text“ und „val“ des Objekts. In jedem Fall bedeuten die letzten beiden Argumente: „false“,“false“, dass dieses neue Element nicht der Standardwert ist und auch nicht ausgewählt wird.
Und das war’s!
Zusammenfassung
Der wenig bekannte Konstruktor Option() kann verwendet werden, um neue HTML-Optionselemente zu erstellen. Je nachdem, wie Sie dies angehen, können Sie einen ziemlich effizienten Code schreiben, der die normalerweise ausführliche Syntax von document umgeht.createTextNode(), Dokument.createElement() und document .appendChild() Methoden.
Hilfreiche Links für den JavaScript Option() Konstruktor