### [Como adicionar uma opção de menu suspenso vazia aos itens do menu suspenso](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**Publicado:** 30 de março de 2021
**Autor:** David Ozokoye

**Excerto:** Este tutorial irá mostrar-lhe como adicionar um menu suspenso vazio aos itens do menu suspenso de pagamento utilizando um pequeno trecho de código. 

**Conteúdo:**

## Introdução

Gostaria de adicionar uma seleção de menu suspenso vazio aos seus Campos de Pagamento sem mostrar um preço zero? Ao utilizar o campo Itens do Menu Suspenso dos Campos de Pagamento, ativar a opção **Mostrar preço após os rótulos dos itens** exibe automaticamente **0,00** para seleções vazias.

Este guia irá mostrar-lhe como manter uma opção “–Selecionar–” limpa, sem a exibição do preço zero.

![por predefinição, o preço zero aparecerá no seu formulário](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## Compreender o problema

Quando cria um campo **Itens do menu suspenso** no seu formulário de pagamento e ativa a opção **Mostrar preço após os rótulos dos itens**, qualquer seleção vazia (como **–Selecionar–**) é automaticamente exibida como **–Selecionar– $0,00**. Esta pode não ser a apresentação ideal para os seus clientes.

O trecho de código neste guia permitirá que:

- Mantenha a sua seleção vazia no topo do menu suspenso
- Remover a exibição do preço “$0,00”
- Manter a exibição do preço para todas as outras opções

## Configurar o formulário

Primeiro, crie o seu formulário e adicione um campo **Itens do menu suspenso** na secção Campos de pagamento.

Para obter ajuda na criação de um formulário, consulte o guia sobre [como criar o seu primeiro formulário](https://wpforms.com/docs/creating-first-form/).

No seu campo **Itens do menu suspenso**:

1. Adicione as suas opções normais com os respetivos preços
2. Adicione uma opção vazia (como **–Selecionar–**) no topo da lista
3. Ative a caixa de seleção **Mostrar preço após os rótulos dos itens** nas definições do campo

![basta adicionar uma seleção de preço vazia ao formulário](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## Adicionar o trecho de código

Adicione este trecho de código ao seu site para remover a exibição do preço da sua seleção vazia:

Se precisar de ajuda para adicionar trechos de código ao seu site, consulte o nosso guia sobre [como adicionar PHP ou JavaScript personalizado ao WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/).

Este código funciona da seguinte forma:

1. Localizando qualquer opção do menu suspenso com um valor de dados de **0,00**
2. Substituir o seu conteúdo de texto por **–Selecionar–**
3. Remover a exibição do preço apenas para esta opção

![Agora o formulário irá mostrar «Selecionar» como o primeiro item do menu suspenso sem preço](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)Pode personalizar o texto “–Selecionar–” modificando a **linha 9** do código. Por exemplo, para alterá-lo para “Escolha uma opção”, atualize a linha para:

```

jQuery('.wpforms-payment-price option[data-amount="0.00"]').text('Escolha uma opção');
```

E já está! A seguir, gostaria de personalizar ainda mais o campo suspenso no seu formulário? O nosso guia sobre [estilizar o campo suspenso](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "estilizar o campo suspenso") aborda todos os passos em detalhe.

**Categorias:** Tutoriais

**Etiquetas:** JS

---