Make sort dropdown keep property

Question

I've got a working sort dropdown on my front end, but I'm after the dropdown keeping the chosen sort method option instead of resetting to the default top of the dropdown option.

e.g. User clicks sort by Name A - Z > Sorted by name > Dropdown option stays as 'Name A-Z' instead of 'default'.

    <select class="sort-web w-select" data-name="Sort" id="sortQuery" name="Sort">
        <option value="postDate asc">New - Old</option>
        <option value="title desc">Name Z - A</option>
        <option value="title asc">Name A - Z</option>
    </select>

Craft Code

{# Either get the order from the query or use a default #}
{% set order = craft.request.getParam('order', 'title asc')  %}

{% for category in craft.categories.group('university').order(order) %}
  {{ category.title }}
{% endfor %}

JS

{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}
{% includeJs orderJs %}

Any help would be greatly appreciated!

Answer 1

In short, you need to set the selected attribute on the option element based on the sort order.

So, if the sort order is title asc, then that option would have the selected (selected="selected") attribute set on it.

I took the liberty to refactor your code to render sort options dynamically and make the selected sort order sticky by comparing the current option being iterated over, against the selected sort option.

{% set sortOptions = [
    {
        label: 'New - Old',
        value: 'postDate asc'
    },
    {
        label: 'Name Z - A',
        value: 'title desc'
    },
    {
        label: 'Name A - Z',
        value: 'title asc'
    },
] %}

{% set selectedSortOption = craft.request.getParam('order', 'title asc') %}

{% for category in craft.categories.group('university').order(selectedSortOption) %}
    {{ category.title }}
{% endfor %}

<select class="sort-web w-select" data-name="Sort" id="sortQuery" name="Sort">
    {% for sortOption in sortOptions %}
        <option value="{{ sortOption.value }}" {{ sortOption.value == selectedSortOption ? 'selected' }}>
            {{ sortOption.label }}
        </option>
    {% endfor %}
</select>

Feel free to follow up if you have any questions.