WordPress ACF关联字段实时前置过滤：二级字段随一级选择联动

一、先给ACF字段设置明确键名 #

确保第一个关联字段的字段键设为teilnehmer_select，第二个设为name_select（在ACF字段编辑界面的「高级」选项里能找到字段键），方便后续JS和PHP定位。

二、添加前端JS监听逻辑 #

在主题的functions.php里插入以下代码，把JS挂载到后台编辑页面：

function enqueue_acf_ajax_script() {
    if ( is_admin() ) {
        wp_enqueue_script(
            'acf-dependent-select',
            get_stylesheet_directory_uri() . '/js/acf-dependent-select.js',
            array('jquery'),
            '1.0',
            true
        );
        // 把AJAX地址传给JS
        wp_localize_script(
            'acf-dependent-select',
            'acf_ajax',
            array('ajax_url' => admin_url('admin-ajax.php'))
        );
    }
}
add_action('admin_enqueue_scripts', 'enqueue_acf_ajax_script');

接着在主题目录新建js/acf-dependent-select.js文件，写入监听逻辑：

jQuery(document).ready(function($) {
    // 监听第一个字段的选择变化
    $(document).on('change', '[data-key="teilnehmer_select"] select', function() {
        const selectedValue = $(this).val();
        const nameSelectField = $('[data-key="name_select"] select');
        
        // 清空第二个字段并显示加载提示
        nameSelectField.empty().append('<option value="">加载中...</option>');
        
        // 发送AJAX请求
        $.ajax({
            url: acf_ajax.ajax_url,
            type: 'POST',
            data: {
                action: 'filter_name_options',
                selected_teilnehmer: selectedValue
            },
            success: function(response) {
                // 更新第二个字段的选项
                nameSelectField.empty();
                if (response.length > 0) {
                    $.each(response, function(index, option) {
                        nameSelectField.append(`<option value="${option.value}">${option.label}</option>`);
                    });
                } else {
                    nameSelectField.append('<option value="">无可用选项</option>');
                }
            },
            error: function() {
                nameSelectField.empty().append('<option value="">加载失败</option>');
            }
        });
    });

    // 页面加载时如果第一个字段已有选中值，自动触发一次过滤
    const initialSelected = $('[data-key="teilnehmer_select"] select').val();
    if (initialSelected) {
        $('[data-key="teilnehmer_select"] select').trigger('change');
    }
});

三、添加后端AJAX处理逻辑 #

继续在主题的functions.php里插入AJAX回调函数：

function filter_name_options() {
    // 验证用户权限
    if (!current_user_can('edit_posts')) {
        wp_die('无权限操作');
    }

    $selected_teilnehmer = $_POST['selected_teilnehmer'];
    $options = array();

    // 根据选中值返回对应选项
    if ($selected_teilnehmer === 'Teilnehmer 1') {
        $options = array(
            array('value' => 'name_1', 'label' => 'Name 1'),
            array('value' => 'name_2', 'label' => 'Name 2')
        );
    }
    // 可在此扩展其他选中值的对应逻辑，比如：
    // elseif ($selected_teilnehmer === 'Teilnehmer 2') { ... }

    wp_send_json($options);
    wp_die();
}
add_action('wp_ajax_filter_name_options', 'filter_name_options');

四、额外说明 #

• 如果第二个字段是ACF「关联自定义文章类型」的字段，需要把后端逻辑改成根据选中的文章ID去查询对应关联数据，而非硬编码选项；前端也要调整DOM选择器，适配ACF关联字段的搜索框和结果列表。
• 测试前清空浏览器缓存，确保JS文件正常加载。

内容的提问来源于stack exchange，提问作者lick123