You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

求助:WordPress中Contact Form 7动态级联下拉菜单突然失效

动态级联下拉菜单失效求助(Contact Form 7 + WordPress)

我此前使用一段代码在WordPress的Contact Form 7中实现了基于CSV数据的动态级联下拉菜单,原本运行正常,但现在突然失效了。本人PHP经验有限,希望能得到帮助。

该实现分为四部分:

1. 服务器端PHP脚本(添加到主题的functions.php文件)

<?php
function ajax_cf7_populate_values() {

        // 读取CSV文件到$makes_models_years数组
    $makes_models_years = array();
    $uploads_folder = wp_upload_dir()['basedir'];
    $file = fopen($uploads_folder.'/make_model_year.csv', 'r');

    $firstline = true;
    while (($line = fgetcsv($file)) !== FALSE) {
        if ($firstline) {
            $firstline = false;
            continue;
        }
        $makes_models_years[$line[0]][$line[1]][] = $line[2];

    }
    fclose($file);

        // 初始化要返回给前端的JSON数组
    $return_array = array(
            'makes' => array_keys($makes_models_years),
            'models' => array(),
            'years' => array(),
            'current_make' => false,
            'current_model' => false
        );

        // 获取表单提交的参数
    $make = key_exists('make', $_POST) ? $_POST['make'] : false;
    $model = key_exists('model', $_POST) ? $_POST['model'] : false;
    $year = key_exists('year', $_POST) ? $_POST['year'] : false;

        // 根据参数填充返回数组
    if ($make) {
        $return_array['current_make'] = $make;
        $return_array['models'] = array_keys($makes_models_years[$make]);
        if ($model) {
        $return_array['current_model'] = $model;
        $return_array['years'] = $makes_models_years[$make][$model];
        if ($year) {
                $return_array['current_year'] = $year;
            }
            }
        }

        // 编码为JSON并输出
        echo json_encode($return_array);
        wp_die();

}

// 注册AJAX钩子,让WordPress识别该处理函数
add_action( 'wp_ajax_cf7_populate_values', 'ajax_cf7_populate_values' );
add_action( 'wp_ajax_nopriv_cf7_populate_values', 'ajax_cf7_populate_values' );

2. 客户端JavaScript脚本(添加到footer.php的结束标签前)

<script>
    (function($) {

        // 缓存三个下拉框DOM元素
        var $makes_dd = $('[name="makes"]');
        var $models_dd = $('[name="models"]');
        var $years_dd = $('[name="years"]');

        // 初始化加载下拉框数据,下拉框值变化时重新加载
        populate_fields();
        $('select').change(function() {
            populate_fields();
        });

        function populate_fields() {

            var data = {
                // 对应后端AJAX钩子的action名称
                'action' : 'cf7_populate_values', 
                // 传递当前选中的下拉框值
                'make' : $makes_dd.val(),
                'model' : $models_dd.val(),
                'year' : $years_dd.val()
            };

            // 调用后端接口,更新下拉框选项
            $.post('/wp-admin/admin-ajax.php', data, function(response) {
                all_values = response;

                $makes_dd.html('').append($('<option>').text(' -- 选择品牌 -- '));
                $models_dd.html('').append($('<option>').text(' -- 选择型号 -- '));
                $years_dd.html('').append($('<option>').text(' -- 选择年份 -- '));

                $.each(all_values.makes, function() {
                    $option = $("<option>").text(this).val(this);
                    if (all_values.current_make == this) {
                        $option.attr('selected','selected');
                    }
                    $makes_dd.append($option);
                });
                $.each(all_values.models, function() {
                    $option = $("<option>").text(this).val(this);
                    if (all_values.current_model == this) {
                        $option.attr('selected','selected');
                    }
                    $models_dd.append($option);
                });
                $.each(all_values.years, function() {
                    $option = $("<option>").text(this).val(this);
                    if (all_values.current_year == this) {
                        $option.attr('selected','selected');
                    }
                    $years_dd.append($option);
                });
            },'json');
        }

    })( jQuery );
</script>

3. CSV文件配置

  • 将名为make_model_year.csv的文件放置在public_html/wp-content/uploads目录

4. Contact Form 7字段设置

[select makes]
[select models]
[select years]

我已尝试修改CSV文件名、重装Contact Form 7插件、重新添加代码等方法,但问题仍未解决。

内容的提问来源于stack exchange,提问作者Tony DU

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.15 10:04:54