如何通过AJAX实现基于父级下拉框的子级下拉框动态加载？

你已经把基础框架搭好了，就差把AJAX的数据流和页面更新这两步打通。我来帮你梳理清楚每个环节该怎么调整：

1. 先把AJAX处理的PHP文件写对 #

你现在的bv-quick-select-ajax.php最大的问题是没有加载WordPress环境，直接调用get_posts这些函数会报错。首先要在文件开头引入wp-load.php，这样才能用WP的核心函数。然后接收JS传过来的选中值，调用你的函数生成选项并输出：

<?php
// 加载WordPress核心，路径根据你的实际目录调整
// 比如如果assets文件夹在主题根目录，那路径就是../wp-load.php
require_once('../../wp-load.php');

// 接收JS传的参数，先做安全过滤
if (isset($_POST['category_title'])) {
    $category = sanitize_text_field($_POST['category_title']);
    // 调用你的函数生成子页面选项
    echo bv_quick_select_get_procedure_options($category);
} else {
    // 没有参数时返回默认提示
    echo '<option>Choose a procedure</option>';
}
?>

注意：一定要确认wp-load.php的路径正确，否则整个AJAX请求会直接返回错误。

2. 修改JS，完成数据传递和页面更新 #

你的JS已经监听了下拉框的变化，但需要调整参数名，并且在成功回调里把返回的HTML替换到第二个下拉框里：

$(document).on('change', '#bv-quick-select-category', function() {
    const selectedCat = $(this).val();
    $.ajax({
        url: 'assets/bv-quick-select-ajax.php',
        type: 'POST',
        data: { category_title: selectedCat }, // 参数名要和PHP里的$_POST键对应
        success: function(response) {
            // 把返回的选项直接替换第二个下拉框的内容
            $('#bv-quick-select-procedure').html(response);
        },
        error: function() {
            // 加个错误提示，用户体验更好
            $('#bv-quick-select-procedure').html('<option>加载失败，请重试</option>');
        }
    });
});

3. 优化函数的可靠性（强烈推荐） #

你现在用页面标题来匹配父页面，这个逻辑有隐患——如果有两个页面标题一样，get_page_by_title只会返回第一个，导致子页面加载错误。更稳妥的方式是用页面ID来传递：

先改第一个下拉框的选项值为页面ID #

修改bv_quick_select_get_category_options，把option的value从标题换成父页面ID：

function bv_quick_select_get_category_options() {
    $procedure_pages = get_posts(array(
        'post_type' => 'page',
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => '_wp_page_template',
                'value' => 'template-procedure-minimal.php'
            )
        )
    ));
    $procedure_categories = array();
    foreach($procedure_pages as $p1) {
        $parent_id = wp_get_post_parent_id($p1->ID);
        if ($parent_id) { // 过滤掉没有父页面的情况
            $procedure_categories[] = $parent_id;
        }
    }
    sort($procedure_categories);
    $output = '';
    foreach(array_unique($procedure_categories) as $c) {
        $parent_post = get_post($c);
        if ($parent_post) { // 确保父页面存在
            $output .= '<option value="'.$parent_post->ID.'">'.$parent_post->post_title.'</option>';
        }
    }
    return $output;
}

调整子页面函数接收ID参数 #

function bv_quick_select_get_procedure_options($parent_id = null) {
    if (!$parent_id) {
        return '<option>Choose a procedure</option>';
    }
    $procedures = get_posts(array(
        'post_type' => 'page',
        'posts_per_page' => -1,
        'post_parent' => intval($parent_id) // 直接用ID，精准匹配
    ));
    $output = '';
    if (empty($procedures)) {
        $output .= '<option>暂无相关项目</option>';
    } else {
        foreach($procedures as $p) {
            $output .= '<option value="'.get_the_permalink($p->ID).'">'.$p->post_title.'</option>';
        }
    }
    return $output;
}

同步更新AJAX文件和JS #

• AJAX PHP文件改成接收parent_id：

if (isset($_POST['parent_id'])) {
    $parent_id = intval($_POST['parent_id']);
    echo bv_quick_select_get_procedure_options($parent_id);
}

• JS里传递parent_id：

data: { parent_id: selectedCat },

这样调整后，整个联动逻辑会更稳定，不会因为标题重复出问题。

最后要检查的点 #

• 确认wp-load.php的路径正确，比如你的assets文件夹在主题根目录下，那路径应该是../wp-load.php，不是../../，别搞错了。
• 测试一下：选第一个下拉框，看第二个下拉框会不会更新；如果没反应，打开浏览器控制台看AJAX请求的错误信息，大概率是路径或者权限问题。

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