Change or update WordPress loop based on dropdown selection

Question

I have a Contact Us page which is showing 9 locations on the sidebar by querying the custom post type "Distributors." I want the user to be able to use a drop down that is populated by the taxonomy "Location." For example, if the user selects "California" from the drop down, it will automatically update the list with just those posts tagged with California. What is the best way to go about this? Also, I don't mind if the page refreshes when the user narrows down to their Country or State.

Ideally, I'd like the parent categories to be shown in one drop down, ie. Germany, Japan, USA, etc. Then a second drop down become populated with the children of that category. For example, the first drop down would display USA, then California would show up in the second drop down.

Thanks.

Answer 1

First use this code for populating parent dropdown.

<select id="parent">
    <option>-</option>
    <?php
        if(taxonomy_exists('parent_taxonomy_name')):
            $results = get_terms('parent_taxonomy_name',array('fields'=>'all','parent'=>0));
            if ($results):
                foreach ($results as $result):
    ?>                                                                 
                    <option value="<?php echo $result->name; ?>"><?php echo $result->name; ?></option>
    <?php 
                endforeach;
            endif;
        endif;
    ?>
</select>

You may need to use ajax/jquery to fill in the 2nd dropdown box.

 <select id="child">
        <option>-</option>
    </select>

jquery code would be something like this:

jQuery("#parent").change(function(){
    jQuery.post(
        // see tip #1 for how we declare global javascript variables
        MyAjax.ajaxurl,
        {
            // here we declare the parameters to send along with the request
            // this means the following action hooks will be fired:
            // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
            action : 'myajax-submit',

            // other parameters can be added along with "action"
            parent : jQuery(this).val()
        },
        function( response ) {
            if(response['success'] != false)
            {
                jQuery('#child').empty().append('<option value="">Select Location</option>');
                jQuery.each(response,function(index,value){
                    jQuery('#child').append('<option value="'+value+'">'+value+'</option>');
                });
            }
        }
    );
});

finally, process ajax in your functions.php file like this:

// if both logged in and not logged in users can send this AJAX request,
// add both of these actions, otherwise add only the appropriate one
add_action( 'wp_ajax_nopriv_myajax-submit', 'myajax_submit' );
add_action( 'wp_ajax_myajax-submit', 'myajax_submit' );

function myajax_submit() {
    // get the submitted parameters
    $parent = $_POST['parent'];
    // generate the response
                $locations = ashyana_getTaxonomyValues( 'parent_taxonomy_name', $parent, 0 );
                $results = array();
                if ($locations):
                    foreach ($locations as $location):                                
                        $loc[] = $location->name;
                    endforeach;
                    $response = json_encode( $loc );
                else:
                    $response = json_encode( array( 'success' => false ) );
                endif;

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don't forget to "exit"
    exit;
}

Hope it helps. Note: change the taxonomy names and other parameters/args/variables with respect to your needs.

Answer 2

Just wanted to share a link that helps explain comments contained in the answer:

http://solislab.com/blog/5-tips-for-using-ajax-in-wordpress/

Here's tip 1 mentioned in one of the comments:

1. USE WP_LOCALIZE_SCRIPT() TO DECLARE JAVASCRIPT GLOBAL VARIABLES

Although wp_localize_script() is created for localization, it also has another great use. You can declare javascript variables with namespaces to use with your script. Here’s the syntax:

wp_localize_script( $handle, $namespace, $variable_array );

Here’s how you should declare the URL to the file that handles AJAX (in this example, I use admin-ajax.php, which is discussed in tip #2):

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

This way, you won’t have to use PHP to print out JavaScript code, which is both ugly and non-cacheable. If you take a look at the generated HTML in the element, you’ll find this:

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script><script type="text/javascript">// <![CDATA[
<span class="mceItemHidden">
/* 
 */
var <span class="hiddenSpellError" pre=""-->MyAjax = {
    <span class="hiddenSpellError" pre="">ajaxurl</span>:  "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]&gt; */
</span>
// ]]></script>

Now, in your ajax.js file, you can use MyAjax.ajaxurl without having to resort to PHP and including wp-load.php. Please refer to tip #2 below for more about setting up the javascript code that sends the request, and how to handle the request properly.