### [So fügen Sie eine leere Dropdown-Auswahl zu Dropdown-Elementen hinzu](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Veröffentlicht:** 30. März 2021
**Autor:** David Ozokoye

**Auszug:** In diesem Tutorial erfahren Sie, wie Sie mit einem kleinen Code-Schnipsel eine leere Dropdown-Auswahl zu den Dropdown-Elementen für die Zahlungsoptionen hinzufügen können. 

**Inhalt:**

## Einleitung

Möchten Sie Ihren Zahlungsfeldern eine leere Dropdown-Auswahl hinzufügen, ohne dass ein Preis von null angezeigt wird? Wenn Sie das Feld „Dropdown-Elemente“ aus den Zahlungsfeldern verwenden und die Option **„Preis nach Elementbezeichnungen anzeigen“** aktivieren, wird bei leeren Auswahlen automatisch **0,00** angezeigt.

In dieser Anleitung erfahren Sie, wie Sie eine übersichtliche Option „–Auswählen–“ beibehalten können, ohne dass der Preis 0 angezeigt wird.

![Standardmäßig wird der Preis 0 in Ihrem Formular angezeigt](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Das Problem verstehen

Wenn Sie in Ihrem Zahlungsformular ein Feld für Dropdown-Elemente erstellen und die Option **Preis nach Artikelbezeichnungen anzeigen** aktivieren, wird jede leere Auswahl (wie **–Auswählen–**) automatisch als **–Auswählen– $0,00** angezeigt. Dies ist möglicherweise nicht die ideale Darstellung für Ihre Kunden.

Mit dem Code-Schnipsel in dieser Anleitung können Sie:

- Ihre leere Auswahl oben im Dropdown-Menü beibehalten
- Die Preisangabe „$0,00“ entfernen
- Die Preisangabe für alle anderen Optionen beibehalten

## Einrichten des Formulars

Erstellen Sie zunächst Ihr Formular und fügen Sie ein Feld **Dropdown-Elemente** aus dem Abschnitt „Zahlungsfelder“ hinzu.

Hilfe beim Erstellen eines Formulars finden Sie in der Anleitung zum [Erstellen Ihres ersten Formulars](https://wpforms.com/docs/creating-first-form/).

In Ihrem Feld „Dropdown-Elemente“:

1. Fügen Sie Ihre regulären Optionen mit den entsprechenden Preisen hinzu
2. Fügen Sie eine leere Option (z. B. **–Auswählen–**) ganz oben in der Liste hinzu
3. Aktivieren Sie das Kontrollkästchen **Preis nach Elementbezeichnungen anzeigen** in den Feldeinstellungen

![Fügen Sie einfach eine leere Preis-Dropdown-Auswahl zum Formular hinzu](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Hinzufügen des Code-Schnipsels

Fügen Sie diesen Code-Schnipsel zu Ihrer Website hinzu, um die Preisanzeige bei der leeren Auswahl zu entfernen:

Wenn Sie Hilfe beim Hinzufügen von Code-Schnipseln zu Ihrer Website benötigen, lesen Sie unseren Leitfaden zum [Hinzufügen von benutzerdefiniertem PHP oder JavaScript für WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Dieser Code funktioniert wie folgt:

1. Er sucht nach einer Dropdown-Option mit einem data-amount von **0,00**
2. Er ersetzt deren Textinhalt durch **–Auswählen–**
3. Er entfernt die Preisanzeige nur für diese Option

![Jetzt zeigt das Formular „Auswählen“ als ersten Dropdown-Eintrag ohne Preis an](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)Sie können den Text „–Select–“ anpassen, indem Sie **Zeile 9** des Codes ändern. Um ihn beispielsweise in „Wählen Sie eine Option“ zu ändern, aktualisieren Sie die Zeile wie folgt:

```

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Wählen Sie eine Option');
```

Und das war’s schon! Möchten Sie als Nächstes das Dropdown-Feld in Ihrem Formular weiter anpassen? Unser Leitfaden zum [Gestalten des Dropdown-Feldes](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "styling the Dropdown field") behandelt alle Schritte im Detail.

**Kategorien:** Tutorials

**Tags:** JS

---