WordPress中使用AJAX实现联动下拉框：二级下拉框无法填充问题

嘿，我来帮你搞定这个WordPress自定义表单的联动下拉问题！

从你给出的代码片段来看，你目前只完成了第一个下拉框的静态渲染，但缺少前端AJAX触发请求、后端动态返回数据的核心逻辑，这就是第二个下拉框无法被填充的关键原因。下面一步步给你拆解解决方案：

1. 完善表单的HTML结构 #

先给第一个下拉框添加明确的ID和触发逻辑，同时预留好第二个下拉框的位置：

<form id="page-changer" action="" method="post">
    <!-- 第一个下拉框：图表类型 -->
    <select id="chart-type-select" name="chart_type">
        <option value="">请选择图表类型</option>
        <?php
        global $wpdb;
        $chart_types = $wpdb->get_results( 
            $wpdb->prepare(
                "SELECT page_id, title FROM master_chart WHERE mod_id=%d AND (geo_type=%d OR geo_type IS NULL) ORDER BY sequence",
                $mod_id, $geo_type
            )
        );
        foreach($chart_types as $type) {
            echo '<option value="'.$type->page_id.'">'.$type->title.'</option>';
        }
        ?>
    </select>

    <!-- 第二个待填充的下拉框 -->
    <select id="secondary-select" name="secondary_option">
        <option value="">请先选择图表类型</option>
    </select>
</form>

注意：这里我给原SQL查询加上了$wpdb->prepare()，避免SQL注入风险，这是WordPress开发的安全规范

2. 配置后端AJAX接口（functions.php） #

在主题的functions.php文件中注册AJAX动作，用来处理第一个下拉框的参数并返回第二个下拉框的选项数据：

// 允许登录/未登录用户都能调用该AJAX接口
add_action('wp_ajax_get_secondary_options', 'get_secondary_options_callback');
add_action('wp_ajax_nopriv_get_secondary_options', 'get_secondary_options_callback');

function get_secondary_options_callback() {
    global $wpdb;
    // 验证传入参数的合法性
    if(!isset($_POST['page_id']) || !is_numeric($_POST['page_id'])) {
        wp_send_json_error('无效的参数');
    }
    $page_id = intval($_POST['page_id']);
    
    // 替换成你实际的查询逻辑：根据第一个下拉的page_id获取第二个下拉的选项
    $secondary_options = $wpdb->get_results(
        $wpdb->prepare("SELECT id, option_name FROM your_target_table WHERE page_id = %d", $page_id)
    );
    
    // 组装成下拉选项的HTML代码
    $options_html = '<option value="">请选择</option>';
    foreach($secondary_options as $option) {
        $options_html .= '<option value="'.$option->id.'">'.$option->option_name.'</option>';
    }
    wp_send_json_success($options_html);
}

3. 添加前端AJAX触发逻辑 #

在模板文件底部或者主题的JS文件中添加监听代码，当第一个下拉框值变化时，请求后端接口并更新第二个下拉框：

jQuery(document).ready(function($) {
    // 监听第一个下拉框的变化事件
    $('#chart-type-select').on('change', function() {
        var selectedPageId = $(this).val();
        var $secondarySelect = $('#secondary-select');
        
        // 如果未选择值，重置第二个下拉框
        if(!selectedPageId) {
            $secondarySelect.html('<option value="">请先选择图表类型</option>');
            return;
        }
        
        // 发送AJAX请求获取选项
        $.ajax({
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
            type: 'POST',
            data: {
                action: 'get_secondary_options',
                page_id: selectedPageId
            },
            beforeSend: function() {
                // 显示加载状态
                $secondarySelect.html('<option value="">加载中...</option>');
            },
            success: function(response) {
                if(response.success) {
                    // 成功返回后更新第二个下拉框
                    $secondarySelect.html(response.data);
                } else {
                    $secondarySelect.html('<option value="">加载失败，请重试</option>');
                }
            },
            error: function() {
                $secondarySelect.html('<option value="">加载失败，请重试</option>');
            }
        });
    });
});

4. 关键调试与注意事项 #

• 检查AJAX请求状态：打开浏览器开发者工具（F12）的Network标签，查看AJAX请求的返回值，确认是否有数据返回或错误提示
• 避免直接修改插件代码：如果之前是修改表单插件代码，建议把逻辑移到主题functions.php或自定义插件中，防止插件更新后代码丢失
• 权限验证：如果表单需要对未登录用户开放，必须保留wp_ajax_nopriv_开头的钩子，否则未登录用户无法触发AJAX

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