Change or update WordPress loop based on dropdown selection

Question

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.

Related Posts: