### [Como adicionar uma opção vazia aos itens de um 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

**Trecho:** Este tutorial mostrará como adicionar um menu suspenso vazio aos itens do menu suspenso de pagamento usando um pequeno trecho de código. 

**Conteúdo:**

## Introdução

Você gostaria de adicionar uma seleção de menu suspenso vazio aos seus Campos de Pagamento sem exibir um preço zero? Ao usar o campo Itens do menu suspenso nos 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 mostrará como manter uma opção “–Selecionar–” limpa, sem a exibição do preço zero.

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

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

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

- Mantenha 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

## Configurando o formulário

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

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

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

1. Adicione suas opções normais com seus respectivos preços
2. Adicione uma opção vazia (como **–Selecionar–**) no topo da lista
3. Marque a caixa de seleção **Mostrar preço após os rótulos dos itens** nas configuraçõ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)## Adicionando 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 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 maneira:

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

![Agora o formulário 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)Você 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 pronto! Em seguida, você gostaria de personalizar ainda mais o campo suspenso do seu formulário? Nosso guia sobre [estilização do campo suspenso](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "estilização do campo suspenso") aborda todas as etapas em detalhes.

**Categorias:** Tutoriais

**Tags:** JS

---