Question

我想在Wordpress中生成州 - 区下拉多选下拉列表。根据各州的选择，区必须加载..

如果有可用的插件，请建议我。

Answer 1

我最近写了一篇关于此事的博文：http://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/。这个例子适用于汽车，但我应用于你的情况，它看起来像这样：

您可以从包含所有州/区的CSV文件开始，如下所示：

State,District
Alabama,"District 1"
Alabame,"District 2"
....

将其保存为states_districts.csv并将其放在服务器上的某个位置。（在此示例中，我将其放在wp-content / uploads文件夹中）

然后使用联系表单7插件创建2个选择字段：

[select states]
[select districts]

接下来，在页面的页脚中创建一些javascript，它将执行AJAX调用

<script>
(function($) {

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

    var $states_dd = $('[name="states"]');
    var $districts_dd = $('[name="districts"]'); 

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

            'state' : $states_dd.val(),
            'district' : $districts_dd.val(),
        };

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

        $.post('<?php echo admin_url( 'admin-ajax.php' ) ?>', data, function(response) {
            all_values = response;

            $states_dd.html('').append($('<option>').text(' -- choose state -- '));
            $districts_dd.html('').append($('<option>').text(' -- choose district  -- '));

            $.each(all_values.states, function() {
                $option = $("<option>").text(this).val(this);
                if (all_values.current_state == this) {
                    $option.attr('selected','selected');
                }
                $states_dd.append($option);
            });
            $.each(all_values.districts, function() {
                $option = $("<option>").text(this).val(this);
                if (all_values.current_district == this) {
                    $option.attr('selected','selected');
                }
                $districts_dd.append($option);
            });
        },'json');
    }

})( jQuery );
</script>

通过创建服务器端功能来完成，该功能将读入CSV文件并将正确的值返回给javascript：

将此添加到functions.php：

function ajax_cf7_populate_values() {

    // read the CSV file in the $states_districts array

    $states_districts = array();
    $uploads_folder = wp_upload_dir()['basedir'];
    $file = fopen($uploads_folder.'\states_districts.csv', 'r');

    $firstline = true;
    while (($line = fgetcsv($file)) !== FALSE) {
        if ($firstline) {
            $firstline = false;
            continue;
        }
        $states_districts[$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(
            'states' => array_keys($states_districts),
            'districts' => array(),
            'current_state' => false,
            'current_district' => false
        );

        // collect the posted values from the submitted form

    $state= key_exists('state', $_POST) ? $_POST['state'] : false;
    $district = key_exists('district', $_POST) ? $_POST['district'] : false;

        // populate the $return_array with the necessary values

    if ($state) {
        $return_array['current_state'] = $state;
        $return_array['districts'] = array_keys($states_districts[$state]);
        if ($district) {
            $return_array['current_district'] = $district;
        }

        // 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' );

Answer 2

我想为任何尝试使用此代码的人分享一个修复程序。一行有错误：

$file = fopen($uploads_folder.'\states_districts.csv', 'r');

应该是

$file = fopen($uploads_folder.'/states_districts.csv', 'r');

Answer 3

您希望在哪里使用下拉菜单？在插件或主题中还是仅在页面中？

这可以使用Ajax调用来完成。通常，您应该在插件/主题中注册Ajax调用处理程序，并在页面中添加动态下拉列表。

http://codex.wordpress.org/AJAX_in_Plugins

jQuery嵌入了Wordpress，请查看本节有关如何创建动态下拉列表的信息

http://www.jqueryscript.net/demo/Dynamic-jQuery-Cascading-Dropdown-Lists-Plugin/

wordpress中的动态下拉列表

3 个答案: