Simple Sort by dropdown on a custom wp_query CPT

Question

I have a basic archive feed.

I am trying to add a simple dropdown sort by form, that allows me to sort the results by date, title and popularity...

I kind of have it, but it's not quite working as I expected.

I have a dropdown, that 'onchange' grabs the value of the option, and adds it to the URL. By setting the value to ?orderby=date&order=DESC it works...

However, it reloads the page (which is fine) and doesn't save the value of the option selected... so the dropdown field doesn't show the value selected...

It also doesn't remove the value if I select a different one. So it will append ?orderby=date&order=ASC on the end of orderby=date&order=DESC if selected. And will keep doing that, which causes issues.

Thirdly, 'Views' doesn't seem to work, not sure what the value should be to filter by how many people have viewed the page (is that even possible?!)

if ( have_posts() ) : 
    echo '<div class="posts-query">';?>
        <div id="sortby"> SORT BY: &nbsp;
        <select class="dropdown-class" name="sort-posts" id="sortbox" onchange="document.location.href=location.href+this.options[this.selectedIndex].value;">
        <option disabled>Sort by</option>
        <option value="?orderby=date&order=DESC">Newest</option>
        <option value="?orderby=date&order=ASC">Oldest</option>
        <option value="?orderby=title&order=ASC">A-Z Asc</option>
        <option value="?orderby=title&order=DESC">A-Z Desc</option>
        <option value="?orderby=views&order=ASC">Views Asc</option>
            <option value="?orderby=views&order=DESC">Views Asc</option>
    </select>
</div>


<?php while ( have_posts() ) : the_post(); ?>   
            <div class="query-post">
                <div class="posts-image">
                    <?php the_post_thumbnail("thumbnail");?>
                </div>
                <div class="post-categories">
                    <?php $postType = get_post_type_object(get_post_type());
                    if ($postType) {
                    echo esc_html($postType->labels->singular_name);
                    } ?>
                </div>

                <div class="posts-title">
                    <a href="<?php the_permalink(); ?>">
                        <h3> 
                            <?php the_title() ?>
                        </h3>
                    </a>
                </div>
            </div>
<?php endwhile; endif; ?>

Is there a way to simply sort the WP_Query by date, title and views, and have it not only SAVE the selected result in the option dropdown as 'selected' but also have it remove the previous query if a new one is selected from the dropdown?

Answer 1

For those who may be interested, I solved this using the following code:

<div id="sortby"> SORT BY: &nbsp;
        <select class="dropdown-class" name="sort-posts" id="sortbox" onchange="document.location.search=this.options[this.selectedIndex].value;">
        <option disabled>Sort by</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'date' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?> value="?orderby=date&order=DESC">Newest</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'date' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?>  value="?orderby=date&order=ASC">Oldest</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'title' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?> value="?orderby=date&order=DESC" value="?orderby=title&order=ASC">A-Z Asc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'title' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?>  value="?orderby=title&order=DESC">A-Z Desc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'views' && isset($_GET["order"]) && trim($_GET["order"]) == 'ASC' ){ echo 'selected'; } ?> value="?orderby=views&order=ASC">Views Asc</option>
        <option <?php if( isset($_GET["orderby"]) && trim($_GET["orderby"]) == 'views' && isset($_GET["order"]) && trim($_GET["order"]) == 'DESC' ){ echo 'selected'; } ?> value="?orderby=views&order=DESC">Views Desc</option>

        </select>
        </div>