Question

我从未使用过jquery或ajax，我真的很难做什么。我已经为3个下拉列表编写了代码。一个用于自定义帖子类型，另外两个用于其类别。当用户从第一个下拉列表中选择时，我希望结果过滤第二个下拉列表，然后是第三个下拉列表。

我不知道如何开始。除了知道我需要使用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>';

这是我第一次参加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 ...

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

0 个答案: