How can I populate a select element with terms from a custom taxonomy and filter post results?

4 Views

Alright, so first, I need you to check out this wire-frame so you can see what I’m trying to accomplish:

Wire-frame

Read More

What I’ve done so far is this:

  1. I created a custom post type for individual addresses.
  2. I created a hierarchical custom taxonomy where the “parent categories” are States, and the “child categories” are Cities.

  3. I’ve used the following code to populate the first select element: 

    <select name="states" id="states" class="etc">
<?php  $terms = get_terms('area', 'parent=0');
    $count = count($terms);
    if ( $count > 0 ){
        foreach ( $terms as $term ) {
            echo '<option value="' . $term->name . '">' . $term->name . '</option>';
        }
    }
?>
</select>

So here’s what I need to know:

  1. How do I populate the second select element based on which parent is selected in the first?
  2. How do I use these select elements to filter my custom posts?
Post Views: 4

Related posts

Leave a Reply

1 comment

  1. Are you familiar with jQuery? You’ll want to post the term to a admin-ajax, and use the response to populate the second select.

    Here is the codex documentation:
    http://codex.wordpress.org/AJAX_in_Plugins

    A loose example for your situation:

    $first_term = $('#states');
$name = $first_term.children('option:selected').text();
    var data = {
            action: 'tag_slug',
            slug: $slug
        };

    var ajaxurl = 'wp-admin/admin-ajax.php';
    $.post(ajaxurl, data, function(response) {
        $('#city').empty().append(response);
    });

    You would build the options in a similar way as you have show in your AJAX response callback, so that that is what is returned and is what is appended to the City select.

    Note the “Ajax on the Viewer-Facing Side” section of the above codex link to make sure it works for non-loggedin users.