### [Comment ajouter une option vide à une liste déroulante](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Publié le :** 30 mars 2021
**Auteur :** David Ozokoye

**Extrait :** Ce tutoriel vous montrera comment ajouter une liste déroulante vide aux éléments de la liste déroulante de paiement à l'aide d'un petit extrait de code. 

**Contenu :**

## Introduction

Souhaitez-vous ajouter une option de sélection vide à vos champs de paiement sans afficher un prix nul ? Lorsque vous utilisez le champ Éléments de la liste déroulante dans les champs de paiement, l'activation de l'option **Afficher le prix après les libellés des éléments** affiche automatiquement **0,00** pour les sélections vides.

Ce guide vous montrera comment conserver une option « –Sélectionner– » épurée sans afficher le prix zéro.

![par défaut, le prix zéro s'affichera dans votre formulaire](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Comprendre le problème

Lorsque vous créez un champ **Éléments du menu déroulant** dans votre formulaire de paiement et que vous activez l'option **Afficher le prix après les libellés des éléments**, toute sélection vide (comme **–Sélectionner–**) s'affiche automatiquement sous la forme **–Sélectionner– $0,00**. Cela n'est peut-être pas la présentation idéale pour vos clients.

L'extrait de code de ce guide vous permettra de :

- Conserver votre sélection vide en haut du menu déroulant
- Supprimer l'affichage du prix « $0,00 »
- Conserver l'affichage du prix pour toutes les autres options

## Configuration du formulaire

Commencez par créer votre formulaire et ajoutez un champ **Éléments du menu déroulant** dans la section Champs de paiement.

Pour obtenir de l'aide sur la création d'un formulaire, consultez le guide sur la [création de votre premier formulaire](https://wpforms.com/docs/creating-first-form/).

Dans votre champ Éléments du menu déroulant :

1. Ajoutez vos options habituelles avec leurs prix respectifs
2. Ajoutez une option vide (comme **–Sélectionner–**) en haut de la liste
3. Cochez la case **Afficher le prix après les libellés des éléments** dans les paramètres du champ

![Ajoutez simplement une option de menu déroulant vide au formulaire](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Ajouter l'extrait de code

Ajoutez cet extrait de code à votre site pour supprimer l'affichage du prix de votre option vide :

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, consultez notre guide sur l'[ajout de code PHP ou JavaScript personnalisé pour WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Ce code fonctionne comme suit :

1. Il recherche toute option de menu déroulant dont la valeur data-amount est **0,00**
2. Remplacer son contenu textuel par **–Sélectionner–**
3. Supprimer l'affichage du prix pour cette option uniquement

![Le formulaire affichera désormais « Sélectionner » comme premier élément du menu déroulant sans prix](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)Vous pouvez personnaliser le texte « –Sélectionner– » en modifiant la **ligne 9** du code. Par exemple, pour le remplacer par « Choisissez une option », modifiez la ligne comme suit :

```

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Choisissez une option');
```

Et voilà ! Souhaitez-vous ensuite personnaliser davantage le champ déroulant de votre formulaire ? Notre guide sur [la mise en forme du champ déroulant](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "styling the Dropdown field") détaille toutes les étapes.

**Catégories :** Tutoriels

**Mots-clés :** JS

---