Dynamische dropdown-Liste in wordpress

Ich kürzlich geschrieben habe, einen blog-post dazu: http://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/. Dieses Beispiel ist mit Autos, aber ich bewarb mich um Ihren Fall würde es etwa so Aussehen:

Könnten Sie beginnen mit einer CSV-Datei mit allen Staaten/Bezirken, so wie hier:

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

speichern Sie es als states_districts.csv-Import und legen Sie Sie irgendwo auf Ihrem server. (In diesem Beispiel ich es in den wp-content/uploads Ordner)

Dann mit dem contact form 7 plugin erstellen 2 Felder markieren:

[select states]
[select districts]

Als Nächstes erstellen Sie einige javascript in Ihre Seite eine Fußzeile, die ein AJAX-Aufruf

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

Beenden, indem Sie Ihre server-side-Funktion, Lesen Sie in der CSV-Datei und die richtigen Werte zurück, der javascript:

hinzufügen 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' );

InformationsquelleAutor Jules Colle