wordpress中的动态下拉列表

时间:2014-02-11 09:22:06

标签: wordpress wordpress-plugin

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

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

3 个答案:

答案 0 :(得分: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' );

答案 1 :(得分:1)

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

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

应该是

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

答案 2 :(得分:0)

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

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

http://codex.wordpress.org/AJAX_in_Plugins

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

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