ドロップダウン項目に空のドロップダウンを追加する方法

はじめに

支払いフィールドに、ゼロ価格を表示せずに空のドロップダウン選択を追加しますか？ 支払いフィールドのドロップダウン項目フィールドを使用する場合、価格を項目ラベルの後に表示オプションを有効にすると、空の選択肢に自動的に0.00が表示されます。

このガイドでは、ゼロ価格表示なしでクリーンな「–選択–」オプションを維持する方法を説明します。

問題の理解

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

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

• ドロップダウンの先頭に空の選択肢を保持する
• 「$0.00」の価格表示を削除する
• 他のすべてのオプションの価格表示を維持する

フォームの設定

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

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

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

コードスニペットの追加

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

このコードは次のように機能します。

1. data-amountが0.00のドロップダウンオプションを見つける
2. そのテキストコンテンツを–選択–に置き換える
3. このオプションのみの価格表示を削除する

「–選択–」テキストは、コードの9行目を変更することでカスタマイズできます。たとえば、「オプションを選択してください」に変更するには、行を次のように更新します。

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

これで完了です！次に、フォームのドロップダウンフィールドをさらにカスタマイズしますか？ドロップダウンフィールドのスタイル設定ガイドでは、すべての手順を詳しく説明しています。