### [Cómo añadir una opción de menú desplegable vacía a los elementos de un menú desplegable](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Publicado:** 30 de marzo de 2021
**Autor:** David Ozokoye

**Extracto:** Este tutorial te mostrará cómo añadir un menú desplegable vacío a los elementos del menú desplegable de pago utilizando un pequeño fragmento de código. 

**Contenido:**

## Introducción

¿Te gustaría añadir una opción de menú desplegable vacía a tus campos de pago sin que se muestre un precio cero? Al utilizar el campo «Elementos del menú desplegable» de los campos de pago, al habilitar la opción **Mostrar precio después de las etiquetas de los elementos**, se muestra automáticamente **0,00** para las selecciones vacías.

Esta guía te mostrará cómo mantener una opción limpia «–Seleccionar–» sin que se muestre el precio cero.

![por defecto, el precio cero aparecerá en tu formulario](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Entender el problema

Cuando creas un campo de **Elementos del menú desplegable** en tu formulario de pago y activas la opción **Mostrar precio después de las etiquetas de los elementos**, cualquier selección vacía (como **–Seleccionar–**) se muestra automáticamente como **–Seleccionar– $0,00**. Puede que esta no sea la presentación ideal para tus clientes.

El fragmento de código de esta guía te permitirá:

- Mantener tu selección vacía en la parte superior del menú desplegable
- Eliminar la visualización del precio «$0,00»
- Mantener la visualización del precio para todas las demás opciones

## Configuración del formulario

En primer lugar, crea tu formulario y añade un campo **Elementos del menú desplegable** desde la sección Campos de pago.

Si necesitas ayuda para crear un formulario, consulta la guía sobre [cómo crear tu primer formulario](https://wpforms.com/docs/creating-first-form/).

En el campo **Elementos del menú desplegable**:

1. Añade tus opciones habituales con sus respectivos precios
2. Añade una opción vacía (como **–Seleccionar–**) en la parte superior de la lista
3. Marca la casilla **Mostrar el precio después de las etiquetas de los elementos** en la configuración del campo

![solo tienes que añadir una selección de menú desplegable de precio vacío al formulario](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Añadir el fragmento de código

Añade este fragmento de código a tu sitio web para eliminar la visualización del precio de tu selección vacía:

Si necesitas ayuda para añadir fragmentos de código a tu sitio web, consulta nuestra guía sobre [cómo añadir PHP o JavaScript personalizados para WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Este código funciona de la siguiente manera:

1. Busca cualquier opción del menú desplegable con un valor de **0,00**
2. Reemplaza su contenido de texto por **–Seleccionar–**
3. Elimina la visualización del precio solo para esta opción

![Ahora el formulario mostrará «Seleccionar» como el primer elemento del menú desplegable sin precio](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)Puedes personalizar el texto «–Seleccionar–» modificando la **línea 9** del código. Por ejemplo, para cambiarlo a «Elige una opción», actualiza la línea a:

```

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Elige una opción');
```

¡Y ya está! A continuación, ¿te gustaría personalizar aún más el campo desplegable de tu formulario? Nuestra guía sobre [cómo aplicar estilos al campo desplegable](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "cómo aplicar estilos al campo desplegable") explica todos los pasos en detalle.

**Categorías:** Tutoriales

**Etiquetas:** JS

---