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


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

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?

1 Answer 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) {

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.