<p>I managed to solve it finally, by starting from what was suggested in the comments. Basically to get the filter to work in Craft I've added <code>action="{{ url('developments') }}"</code> to the form class, which keeps the url on the same page, and then on the  tag I added a <code>name="county1"</code> and some javascript to get it to reload when it's selected using <code>onchange="this.form.submit()"</code></p>

<p>Then in the results below I set a query variable using <code>{% set query = craft.request.getParam('county1') %}</code> and then created a second variable called queryFilter to search the correct category, based on the selected field <code>{% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %}</code> which to print out the results is then referenced via a for loop {% for category in queryFilter %}</p>

<p>So there's quite a few steps to get it to work, so it's not something that's obvious from the Craft documentation, which doesn't have hardly anything on this subject that I've found.</p>

<p>Here's the code as whole so that it help makes sense to someone trying to do the same type of thing:</p>

<pre><code>&lt;form class="form-inline" action="{{ url('developments') }}" method="get"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="county1"&gt;Location&lt;/label&gt;
    &lt;div class="selectwrap"&gt;
      &lt;select id="county1" class="form-control" name="county1" onchange="this.form.submit()"&gt;
        &lt;option value="all"&gt;All&lt;/option&gt;
        {% for category in craft.categories.group('counties').order('title asc') %}
        &lt;option value="{{ category.slug }}"&gt;{{ category.title }}&lt;/option&gt;
        {% endfor %}
        &lt;/select&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/form&gt;

&lt;section class="developments"&gt;
    &lt;div class="container"&gt;

        {% set query = craft.request.getParam('county1') %}
        {% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %}

        {% if queryFilter %}
        {% for category in queryFilter %}
        &lt;div class="development-block"&gt;

        ....markup...

        &lt;/div&gt;
        {% endfor %}
        {% endif %}
    &lt;/div&gt;
&lt;/section&gt;
</code></pre>

CC BY-SA 3.0
2017-01-15T17:39:27.170Z
2017-01-15T17:39:27.170Z
mention79
<p>I have a page that lists all of the property developments of my client, and am able to show the lists of the categories in the dropdown fields, but I can't work out how to get them to actually change the results below.</p>

<p>Attached is a screenshot</p>

<p>So how do I get the results below the filters to change to only show the selected item in the dropdown? Am completely stuck on this.</p>

<p>What would be really helpful is a simple walkthrough of what I need to do to make the selected filter output results on the page, as is a complicated subject. And need it explaining in detail if possible, as am a beginner at this.</p>

<p><a href="https://i.sstatic.net/0JoPT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0JoPT.png" alt="dropdown filter"></a></p>

<p>And here's my code:</p>

<pre><code>    &lt;form class="form-inline" action="{{ url('developments') }}" method="get"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="county1"&gt;Location&lt;/label&gt;
        &lt;div class="selectwrap"&gt;
          &lt;select id="county1" class="form-control" name="county1" onchange="this.form.submit()"&gt;
            &lt;option&gt;All&lt;/option&gt;
            {% for category in craft.categories.group('counties').order('title asc') %}
            &lt;option value="{{ category.slug }}"&gt;{{ category.title }}&lt;/option&gt;
            {% endfor %}
          &lt;/select&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      ........more dropdown code...
    &lt;/form&gt;

  &lt;section class="developments"&gt;
    &lt;div class="container"&gt;
      {% for category in craft.categories.group('developments').order('title asc') %}
      ......code for block...
      {% endfor %}
</code></pre>

CC BY-SA 3.0
2017-01-14T18:03:13.213Z
How are you updating the page? AJAX? Complete reload? If you're sending this back to Craft, you need to update your query and get the selected drop down param using [craft.request.getParam()](https://craftcms.com/docs/templating/craft.request#getParam).
RitterKnight
CC BY-SA 3.0
2017-01-14T18:32:47.980Z
I don't know how to do it with AJAX and can't find any decent examples of how it should be setup anywhere. So am assuming it's a complete reload of the page. So I need to know how to get the selected drop down param using craft.request.getParam() then if possible?
mention79
CC BY-SA 3.0
2017-01-14T19:16:30.797Z
So when you change a drop down, does the page reload? You would have set some JS to make that happen. You'll want to give your dropdowns ``name`` attributes so they get sent over when the form submits (eg ``name="county1"``. That submitted data you can then check in you template. ``{% if craft.request.getParam('country1') is not empty %} {% set countyFilter = craft.request.getParam('country1') %}``  etc.
RitterKnight
CC BY-SA 3.0
2017-01-14T19:46:32.187Z
Only if add a small piece of JavaScript to the select tag. But i can't get it to relate to the drop down field etc. I really need to find a detailed example that I can deconstruct, as the craft docs aren't helping on this.
mention79
<search><filter>
Search entries by location or name
# Search entries by location or name

(Asked by: username_0 on 2017-01-14)

I have a page that lists all of the property developments of my client, and am able to show the lists of the categories in the dropdown fields, but I can't work out how to get them to actually change the results below.
Attached is a screenshot
So how do I get the results below the filters to change to only show the selected item in the dropdown? Am completely stuck on this.
What would be really helpful is a simple walkthrough of what I need to do to make the selected filter output results on the page, as is a complicated subject. And need it explaining in detail if possible, as am a beginner at this.

And here's my code:
    
      
        Location
        
          
            All
            {% for category in craft.categories.group('counties').order('title asc') %}
            {{ category.title }}
            {% endfor %}
          
        
      
      ........more dropdown code...
    

  
    
      {% for category in craft.categories.group('developments').order('title asc') %}
      ......code for block...
      {% endfor %}

**Tags:** search, filter
> **Comments:**
> **username_1**: How are you updating the page? AJAX? Complete reload? If you're sending this back to Craft, you need to update your query and get the selected drop down param using [craft.request.getParam()](https://craftcms.com/docs/templating/craft.request#getParam).  
> **username_0**: I don't know how to do it with AJAX and can't find any decent examples of how it should be setup anywhere. So am assuming it's a complete reload of the page. So I need to know how to get the selected drop down param using craft.request.getParam() then if possible?  
> **username_1**: So when you change a drop down, does the page reload? You would have set some JS to make that happen. You'll want to give your dropdowns ``name`` attributes so they get sent over when the form submits (eg ``name="county1"``. That submitted data you can then check in you template. ``{% if craft.request.getParam('country1') is not empty %} {% set countyFilter = craft.request.getParam('country1') %}``  etc.  
> **username_0**: Only if add a small piece of JavaScript to the select tag. But i can't get it to relate to the drop down field etc. I really need to find a detailed example that I can deconstruct, as the craft docs aren't helping on this.  

---

## 1 answers

### Answer by username_0 on 2017-01-15. Score: 1

I managed to solve it finally, by starting from what was suggested in the comments. Basically to get the filter to work in Craft I've added action="{{ url('developments') }}" to the form class, which keeps the url on the same page, and then on the  tag I added a name="county1" and some javascript to get it to reload when it's selected using onchange="this.form.submit()"
Then in the results below I set a query variable using {% set query = craft.request.getParam('county1') %} and then created a second variable called queryFilter to search the correct category, based on the selected field {% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %} which to print out the results is then referenced via a for loop {% for category in queryFilter %}
So there's quite a few steps to get it to work, so it's not something that's obvious from the Craft documentation, which doesn't have hardly anything on this subject that I've found.
Here's the code as whole so that it help makes sense to someone trying to do the same type of thing:

  
    Location
    
      
        All
        {% for category in craft.categories.group('counties').order('title asc') %}
        {{ category.title }}
        {% endfor %}
        
      
   



    

        {% set query = craft.request.getParam('county1') %}
        {% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %}

        {% if queryFilter %}
        {% for category in queryFilter %}
        

        ....markup...

        
        {% endfor %}
        {% endif %}


---

