编辑：多个Wordpress下拉列表和过滤器

I have never used jquery or ajax and i am really stuck what to do. i've written my code for 3 dropdown lists. one for a custom post type and 2 more for its categories. when a user selects from the first dropdown, i want the results to filter for the second dropdown, and then the third dropdown.

i am not sure how to even get started. besides knowing i need to use jquery/ajax.

// dropdown for title custom post
    $posts = get_posts(
        array(
            'post_type' => 'directory',
            'orderby' => 'title',
            'order' => 'ASC',
            'numberposts' => -1)
            );
    if( ! $posts ) return;
    echo '<select id="departments"><option value="">Select The Area Of Care</option>';
        foreach( $posts as $p ) {
            echo '<option value="dept-'.$p->ID.'">' . esc_html( $p->post_title ) . '</option>';
        }
    echo '</select>';

    //dropdown for campus
    // WP_Query arguments
    $argsCampus = array (
        'post_type' => 'directory',
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $queryCampus = new WP_Query( $argsCampus );
    echo '<select id="campus"><option value="">Select The Campus</option>';
    if($queryCampus->post_count != 0 ) {
        while ( $queryCampus->have_posts() ) : $queryCampus->the_post();
            $taxonomyCampus = get_the_terms( $post->ID, 'campus');
    // Print the term names
            foreach ( $taxonomyCampus as $termCampus ) {
                echo '<option value="campus-'.$termCampus->term_id.'">' . $termCampus->name.'</option>';
            }
        endwhile;
    }
    echo '</select>';

Here is my first go at the jQuery

<script>
    var options = $("#campus").html();
    $("#departments").change(function(e) {
        var text = $("#departments :selected").text();
        $("#campus").html(options);
        if (text == "All") return;
        $('#campus :not([value^="' + text.substr(0, 3) + '"])').remove();

    });
</script>

    etc ...