### [ドロップダウン項目に「空」の選択肢を追加する方法](https://wpforms.com/developers/how-to-add-an-empty-dropdown-to-dropdown-items/)

**公開日:** 2021年3月30日
**著者:** David Ozokoye

**抜粋:** このチュートリアルでは、簡単なコードスニペットを使用して、支払いドロップダウン項目に「空のドロップダウン」を追加する方法をご紹介します。

**内容：**

## はじめに

支払いフィールドに、価格を「0」と表示せずに「空のドロップダウン」を追加したいとお考えではありませんか？ 支払いフィールドの「ドロップダウン項目」フィールドを使用する場合、**「項目ラベルの後に価格を表示する」**オプションを有効にすると、空の選択項目に対して自動的に **0.00** が表示されます。

このガイドでは、価格0円を表示せずに、すっきりとした「–選択–」オプションを維持する方法をご紹介します。

![デフォルトでは、フォームに価格0円が表示されます](https://wpforms.com/wp-content/uploads/2022/05/wpforms-empty-dropdown-zero-price.jpg)## 問題の理解

支払いフォームに「ドロップダウン項目」フィールドを作成し、**「項目ラベルの後に価格を表示する」**オプションを有効にすると、空の選択肢（**–選択–**など）は自動的に **–選択– $0.00** と表示されます。これは、お客様にとって理想的な表示ではないかもしれません。

このガイドのコードスニペットを使用すると、以下のことが可能になります：

- 空の選択肢をドロップダウンの一番上に保持する
- 「$0.00」という価格表示を削除する
- 他のすべてのオプションについては価格表示を維持する

## フォームの設定

まず、フォームを作成し、「支払いフィールド」セクションから**ドロップダウン項目**フィールドを追加します。

フォームの作成方法については、[最初のフォームの作成](https://wpforms.com/docs/creating-first-form/)に関するガイドをご覧ください。

**ドロップダウン項目**フィールドで：

1. 通常のオプションとそれぞれの価格を追加します
2. リストの一番上に空のオプション（**–選択–**など）を追加します
3. フィールド設定で**項目ラベルの後に価格を表示**チェックボックスを有効にします

![フォームに空の価格ドロップダウン選択項目を追加する](https://wpforms.com/wp-content/uploads/2022/05/wpforms-payment-dropdown-field-show-price.jpg)## コードスニペットの追加

空の選択項目から価格表示を削除するには、以下のコードスニペットをサイトに追加してください：

サイトへのコードスニペットの追加についてサポートが必要な場合は、[WPFormsへのカスタムPHPまたはJavaScriptの追加](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)に関するガイドをご覧ください。

このコードは以下の方法で機能します：

1. data-amountが**0.00**のドロップダウンオプションを検索
2. そのテキストコンテンツを **–Select–** に置き換える
3. このオプションのみ価格表示を非表示にする

![これで、フォームの最初のドロップダウン項目に価格なしで「Select」と表示されます](https://wpforms.com/wp-content/uploads/2022/05/wpforms-remove-zero-price.jpg)コードの**9行目**を変更することで、「–Select–」というテキストをカスタマイズできます。例えば、「Choose an option」に変更するには、その行を次のように更新します：

```

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

これで完了です！ 次に、フォームのドロップダウンフィールドをさらにカスタマイズしてみませんか？[ドロップダウンフィールドのスタイル設定](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "styling the Dropdown field")に関するガイドでは、その手順を詳しく解説しています。

**カテゴリ:** チュートリアル

**タグ:** JS

---