在 WordPress 中填充联系表单 7 的级联下拉列表

问题描述 投票:0回答:0

嘿伙计们,我希望你们一切都好。 我曾经使用从网站复制的这段代码,并且运行没有任何问题。 但突然间它就不再起作用了。 我不知道为什么,有人可以帮忙吗? PS:我在 PHP 方面没有太多经验:)

代码有4部分:

第一个:服务器端脚本(PHP)。将此代码添加到functions.php 我在主题的functions.php文件的底部添加了这个函数:

<?php
function ajax_cf7_populate_values() {

        // read the CSV file in the $makes_models_years array

    $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);

        // setup the initial array that will be returned to the the client side script as a JSON object.

    $return_array = array(
            'makes' => array_keys($makes_models_years),
            'models' => array(),
            'years' => array(),
            'current_make' => false,
            'current_model' => false
        );

        // collect the posted values from the submitted form

    $make = key_exists('make', $_POST) ? $_POST['make'] : false;
    $model = key_exists('model', $_POST) ? $_POST['model'] : false;
    $year = key_exists('year', $_POST) ? $_POST['year'] : false;

        // populate the $return_array with the necessary values

    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;
            }
            }
        }

        // encode the $return_array as a JSON object and echo it
        
        echo json_encode($return_array);
        wp_die();

}

// These action hooks are needed to tell WordPress that the cf7_populate_values() function needs to be called
// if a script is POSTing the action : 'cf7_populate_values'

add_action( 'wp_ajax_cf7_populate_values', 'ajax_cf7_populate_values' );
add_action( 'wp_ajax_nopriv_cf7_populate_values', 'ajax_cf7_populate_values' );

第二:客户端脚本(JavaScript)。将其添加到 footer.php 我将此代码添加到 footer.php 中,就在标签之前。

<script>
    (function($) {

        // create references to the 3 dropdown fields for later use.

        var $makes_dd = $('[name="makes"]');
        var $models_dd = $('[name="models"]');
        var $years_dd = $('[name="years"]');


        // run the populate_fields function, and additionally run it every time a value changes

        populate_fields();
        $('select').change(function() {
            populate_fields();
        });

        function populate_fields() {

            var data = {

                // action needs to match the action hook part after wp_ajax_nopriv_ and wp_ajax_ in the server side script.

                'action' : 'cf7_populate_values', 

                // pass all the currently selected values to the server side script.

                'make' : $makes_dd.val(),
                'model' : $models_dd.val(),
                'year' : $years_dd.val()
            };

            // call the server side script, and on completion, update all dropdown lists with the received values.

            $.post('/wp-admin/admin-ajax.php', data, function(response) {
                all_values = response;

                $makes_dd.html('').append($('<option>').text(' -- choose make -- '));
                $models_dd.html('').append($('<option>').text(' -- choose model  -- '));
                $years_dd.html('').append($('<option>').text(' -- choose year -- '));

                $.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>

第三:我将csv文件放在上传文件夹中,路径为(public_html/wp-content/uploads),名称为(make_model_year.csv),文件如下图

enter image description here

四:我在contact 7插件中制作表格。像这样

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

我尝试了很多事情,包括:

  • 更改 CSV 文件的名称
  • 删除插件并重新安装
  • 删除代码并将其放回去

但这一切都不起作用。

javascript php wordpress contact-form-7 cascadingdropdown
© www.soinside.com 2019 - 2024. All rights reserved.