求助: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
相关产品推荐
相关产品推荐

