<p>In short, you need to set the <em>selected</em> attribute on the <em>option</em> element based on the <em>sort order</em>.</p>

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

<p>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.</p>

<pre class="lang-twig prettyprint-override"><code>{% 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 %}

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

<p>Feel free to follow up if you have any questions.</p>

CC BY-SA 3.0
2017-04-11T14:04:49.470Z
Hey Selvin, thanks for replying. I'm currently getting the following error in Craft 'Variable "selectedSortOption" does not exist'
JMKelley
CC BY-SA 3.0
2017-04-11T14:07:34.313Z
Ok, let me throw this on a local dev site and test it out.
Selvin Ortiz
CC BY-SA 3.0
2017-04-11T14:09:08.483Z
Selvin - no need. It was a case of my template structure. I needed to set the selected option above my current code.
JMKelley
CC BY-SA 3.0
2017-04-11T14:10:19.730Z
Small spelling mistake in 'title' caused an exception. 3rd Value down :)
JMKelley
CC BY-SA 3.0
2017-04-11T14:13:20.953Z
Great, I was wondering if you updated the code to use _selectedSortOption_ before _setting_ it. Good fix!

And yes, fat fingers on my part, I'll fix the typo in _titile_ in my answer.
Selvin Ortiz
CC BY-SA 3.0
2017-04-11T14:23:28.920Z
Ok. Without looking at the pagination code, it would be hard to diagnose. It also goes beyond the scope of your initial question. Can you update your question, or better yet, create another question that includes the pagination code? This would allow this question to remain focused on making the value sticky while the other one can get more specific about retaining the value across paginated results. I'll be happy to help once you do one of the two things I've suggested.
Selvin Ortiz
CC BY-SA 3.0
2017-04-11T14:25:17.217Z
Apologies - new question created http://craftcms.stackexchange.com/questions/19905/endless-scroll-ordering
JMKelley
CC BY-SA 3.0
2017-04-11T14:33:04.940Z
Great! And please, no apologies needed. I hope I didn't make you feel bad.
Selvin Ortiz
CC BY-SA 3.0
2017-04-11T13:46:09.193Z
2017-04-11T14:14:20.617Z
2017-04-11T14:14:20.617Z
Selvin Ortiz
<p>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.</p>

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

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

<p>Craft Code</p>

<pre><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 %}
</code></pre>

<p>JS</p>

<pre><code>{% 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 %}
</code></pre>

<p>Any help would be greatly appreciated!</p>

<templating><entries><sorting>
Make sort dropdown keep property
# Make sort dropdown keep property

(Asked by: username_0 on 2017-04-11)

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'.
    
        New - Old
        Name Z - A
        Name A - Z
    

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!

**Tags:** templating, entries, sorting


---

## 1 answers

### Answer by username_1 on 2017-04-11. Score: 3 | Accepted answer

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 %}


    {% for sortOption in sortOptions %}
        
            {{ sortOption.label }}
        
    {% endfor %}


Feel free to follow up if you have any questions.

> **Comments:**
> **username_0**: Hey Selvin, thanks for replying. I'm currently getting the following error in Craft 'Variable "selectedSortOption" does not exist'  
> **username_1**: Ok, let me throw this on a local dev site and test it out.  
> **username_0**: Selvin - no need. It was a case of my template structure. I needed to set the selected option above my current code.  
> **username_0**: Small spelling mistake in 'title' caused an exception. 3rd Value down :)  
> **username_1**: Great, I was wondering if you updated the code to use _selectedSortOption_ before _setting_ it. Good fix!  And yes, fat fingers on my part, I'll fix the typo in _titile_ in my answer.  
> **username_1**: Ok. Without looking at the pagination code, it would be hard to diagnose. It also goes beyond the scope of your initial question. Can you update your question, or better yet, create another question that includes the pagination code? This would allow this question to remain focused on making the value sticky while the other one can get more specific about retaining the value across paginated results. I'll be happy to help once you do one of the two things I've suggested.  
> **username_0**: Apologies - new question created http://craftcms.stackexchange.com/questions/19905/endless-scroll-ordering  
> **username_1**: Great! And please, no apologies needed. I hope I didn't make you feel bad.  

---

