### [Come aggiungere un menu a tendina vuoto alle voci di un menu a tendina](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Pubblicato:** 30 marzo 2021
**Autore:** David Ozokoye

**Estratto:** Questo tutorial ti mostrerà come aggiungere un menu a tendina vuoto alle voci del menu a tendina di pagamento utilizzando un piccolo frammento di codice. 

**Contenuto:**

## Introduzione

Ti piacerebbe aggiungere una selezione a tendina vuota ai tuoi campi di pagamento senza mostrare un prezzo pari a zero? Quando si utilizza il campo Voci del menu a tendina dai Campi di pagamento, l'abilitazione dell'opzione **Mostra prezzo dopo le etichette delle voci** visualizza automaticamente **0,00** per le selezioni vuote.

Questa guida ti mostrerà come mantenere un'opzione "–Seleziona–" pulita senza la visualizzazione del prezzo zero.

![per impostazione predefinita, il prezzo zero apparirà nel tuo modulo](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Comprendere il problema

Quando crei un campo **Elementi a discesa** nel tuo modulo di pagamento e abiliti l'opzione **Mostra prezzo dopo le etichette degli elementi**, qualsiasi selezione vuota (come **–Seleziona–**) viene automaticamente visualizzata come **–Seleziona– $0,00**. Questa potrebbe non essere la presentazione ideale per i tuoi clienti.

Il frammento di codice in questa guida ti consentirà di:

- Mantenere la selezione vuota in cima al menu a discesa
- Rimuovere la visualizzazione del prezzo “$0,00”
- Mantenere la visualizzazione del prezzo per tutte le altre opzioni

## Configurazione del modulo

Per prima cosa, crea il tuo modulo e aggiungi un campo **Voci del menu a tendina** dalla sezione Campi di pagamento.

Per assistenza nella creazione di un modulo, consulta la guida su [come creare il tuo primo modulo](https://wpforms.com/docs/creating-first-form/).

Nel campo **Voci del menu a tendina**:

1. Aggiungi le opzioni standard con i rispettivi prezzi
2. Aggiungi un'opzione vuota (come **–Seleziona–**) in cima all'elenco
3. Seleziona la casella **Mostra prezzo dopo le etichette delle voci** nelle impostazioni del campo

![basta aggiungere una selezione a tendina vuota per il prezzo al modulo](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Aggiunta dello snippet di codice

Aggiungi questo snippet di codice al tuo sito per rimuovere la visualizzazione del prezzo dalla selezione vuota:

Se hai bisogno di aiuto per aggiungere snippet di codice al tuo sito, consulta la nostra guida su [come aggiungere PHP o JavaScript personalizzati per WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Questo codice funziona in questo modo:

1. Individua qualsiasi opzione del menu a tendina con un valore data-amount pari a **0,00**
2. Sostituendo il suo contenuto testuale con **–Seleziona–**
3. Rimuovendo la visualizzazione del prezzo solo per questa opzione

![Ora il modulo mostrerà Seleziona come prima voce del menu a tendina senza prezzo](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)Puoi personalizzare il testo “–Seleziona–” modificando la **riga 9** del codice. Ad esempio, per cambiarlo in “Scegli un’opzione”, aggiorna la riga come segue:

```

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Scegli un’opzione');
```

E questo è tutto! Vuoi personalizzare ulteriormente il campo a tendina del tuo modulo? La nostra guida su [come personalizzare il campo a tendina](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "come personalizzare il campo a tendina") illustra tutti i passaggi in dettaglio.

**Categorie:** Tutorial

**Tag:** JS

---