Gravity Forms dropdown fields添加/移除按钮及多行选项实现咨询

嘿，刚好对Gravity Forms的自定义字段折腾过几次，来给你详细解答这两个问题：

1. 为Dropdown Fields配置ADD/Remove按钮 #

Gravity Forms默认不给下拉字段提供添加/移除选项的按钮，不过咱们可以用自定义JS+PHP快速实现这个功能，步骤如下：

第一步：给目标下拉字段标记自定义类 #

在表单编辑页面，找到你要修改的下拉字段，进入「字段设置」，在「CSS类名称」里输入 custom-dropdown-with-buttons，保存表单。

第二步：添加自定义JavaScript逻辑 #

我们需要写一段JS来生成按钮，并绑定添加/移除选项的事件。你可以选择把代码放到主题的JS文件里，或者用PHP直接嵌入（更方便）：

下面是嵌入版的PHP代码，把它加到你的主题functions.php里，记得替换代码里的5为你的表单ID：

add_action('gform_enqueue_scripts', 'add_inline_custom_dropdown_scripts', 10, 2);
function add_inline_custom_dropdown_scripts($form, $is_ajax) {
    // 只在目标表单加载代码，替换5为你的表单ID
    if ($form['id'] != 5) return;
    
    $script = "
        jQuery(document).ready(function($) {
            // 定位到标记了自定义类的下拉字段
            const \$dropdown = $('.custom-dropdown-with-buttons select');
            // 创建添加、移除按钮
            const \$addBtn = $('<button type=\"button\" class=\"gform-button add-option-btn\">+ 添加选项</button>');
            const \$removeBtn = $('<button type=\"button\" class=\"gform-button remove-option-btn\">- 移除选项</button>');
            
            // 把按钮插到下拉字段后面
            \$dropdown.after(\$addBtn).after(\$removeBtn);

            // 添加选项的点击事件：弹出输入框获取文本，生成选项
            \$addBtn.on('click', function() {
                const optionText = prompt('请输入新选项的文本：');
                if (optionText) {
                    // 把文本转成小写连字符格式作为选项值（也可以改成让用户输入值）
                    const optionValue = optionText.toLowerCase().replace(/\\s+/g, '-');
                    \$dropdown.append(`<option value=\"${optionValue}\">${optionText}</option>`);
                }
            });

            // 移除选项的点击事件：移除选中的非默认选项
            \$removeBtn.on('click', function() {
                const \$selectedOption = \$dropdown.find('option:selected');
                if (\$selectedOption.length && !\$selectedOption.is(':first-child')) {
                    \$selectedOption.remove();
                } else {
                    alert('请选择一个要移除的选项，默认选项不能移除哦！');
                }
            });
        });
    ";
    wp_add_inline_script('jquery', $script);
}

第三步：（可选）美化按钮样式 #

如果觉得默认按钮不好看，可以加一段自定义CSS，放到主题的「自定义CSS」里：

.add-option-btn, .remove-option-btn {
    margin: 5px 5px 0 0;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.add-option-btn {
    background-color: #2ecc71;
    color: #fff;
}
.remove-option-btn {
    background-color: #e74c3c;
    color: #fff;
}

2. 为Dropdown Fields添加类似List Fields的+按钮额外行添加/移除选项？ #

你说的应该是像List字段那样，点击+就能新增一行下拉字段，点击-移除该行对吧？Gravity Forms默认也没有这个功能，但同样可以用自定义代码实现，或者用第三方兼容插件。

自定义代码实现步骤： #

1. 创建容器和模板行：在表单里添加一个「Section」字段作为容器，给它加自定义CSS类 custom-dropdown-list-container；然后在这个Section里添加一个下拉字段，作为模板行，给下拉字段加类 dropdown-list-item。

2. 添加JS逻辑实现行的添加/移除：同样用PHP嵌入JS代码，加到主题functions.php里，替换表单ID：

add_action('gform_enqueue_scripts', 'add_inline_dropdown_list_scripts', 10, 2);
function add_inline_dropdown_list_scripts($form, $is_ajax) {
    if ($form['id'] != 5) return; // 替换为你的表单ID
    
    $script = "
        jQuery(document).ready(function($) {
            const \$container = $('.custom-dropdown-list-container');
            // 克隆初始的下拉行作为模板
            const \$template = \$container.find('.dropdown-list-item').first().clone();
            // 创建添加行按钮
            const \$addRowBtn = $('<button type=\"button\" class=\"gform-button add-dropdown-row-btn\">+ 添加下拉行</button>');
            \$container.append(\$addRowBtn);

            // 给初始行添加移除按钮（至少保留一行）
            \$container.find('.dropdown-list-item').each(function() {
                if (\$container.find('.dropdown-list-item').length > 1) {
                    $(this).append('<button type=\"button\" class=\"gform-button remove-dropdown-row-btn\">- 移除</button>');
                }
            });

            // 添加新行的事件
            \$addRowBtn.on('click', function() {
                const \$newRow = \$template.clone();
                // 重置新行下拉的选中状态
                \$newRow.find('select').val('');
                // 给新行加移除按钮
                \$newRow.append('<button type=\"button\" class=\"gform-button remove-dropdown-row-btn\">- 移除</button>');
                // 把新行插到添加按钮前面
                \$container.find('.add-dropdown-row-btn').before(\$newRow);
            });

            // 移除行的事件（确保至少保留一行）
            $(document).on('click', '.remove-dropdown-row-btn', function() {
                if (\$container.find('.dropdown-list-item').length > 1) {
                    $(this).closest('.dropdown-list-item').remove();
                } else {
                    alert('至少要保留一行下拉字段哦！');
                }
            });
        });
    ";
    wp_add_inline_script('jquery', $script);
}

替代方案：第三方插件 #

如果你不想写代码，也可以找Gravity Forms官方兼容的第三方扩展插件，这类插件通常提供可视化配置界面，能快速实现多行下拉的添加/移除功能，不过要注意选择口碑好的插件哦。

内容的提问来源于stack exchange，提问作者Earn 1sec