<p>You can do this using the <a href="http://buildwithcraft.com/docs/templating/craft.entries#relatedTo" rel="nofollow">relatedTo param</a>.</p>



<pre class="lang-html prettyprint-override"><code>{# Get the selected category ID from a 'catId' query string param #}
{% set catId = craft.request.getQuery('catId') %}

{# Define the 'relatedTo' param value, depending on if there is a category #}
{% if catId %}
    {% set relatedToParam = {
        targetElement: catId,
        field: 'categoriesFieldHandle'
    } %}
{% else %}
    {% set relatedToParam = null %}
{% endif %}

{# Define the ElementCriteriaModel for people #}
{% set people = craft.entries({
    section: 'people',
    relatedTo: relatedToParam,
    limit: null,
    order: 'title asc'
}) %}

{# Output the people #}
{% for person in people %}
    &lt;li&gt;{{ person.title }}&lt;/li&gt;
{% endfor %}
</code></pre>

<p>With this code in place, you just need to update your view so that when a category is selected, this template is re-loaded with a <code>?catId=X</code> query string, where <em>X</em> is the selected category ID.</p>

<p>The simplest example of that would be with a list of category links:</p>

<pre class="lang-html prettyprint-override"><code>{% for cat in craft.categories.group('myGroupHandle') %}
    {% set url = url(craft.request.path, { catId: cat.id }) %}
    &lt;li&gt;&lt;a href="{{ url }}"&gt;{{ cat.title }}&lt;/a&gt;&lt;/li&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-10-07T14:55:37.143Z
Hi Brandon, when I add the template code verbatim it gives me the error "Unexpected tag name "catId" (expecting closing tag for the "block" tag defined near line 5)"  - There is a closing block tag.
Martin
CC BY-SA 3.0
2015-10-07T17:03:41.050Z
@Martin Sorry, typo. Forgot the `set` in that `{% set catId = ...` line.
Brandon Kelly
CC BY-SA 3.0
2015-10-08T08:32:05.377Z
Sorry, one last thing... how do I display the title of the category currently being shown?
Martin
CC BY-SA 3.0
2015-10-08T13:17:36.663Z
@Martin Can you post that as a new question please?
Brandon Kelly
CC BY-SA 3.0
2015-10-08T13:47:10.753Z
Hi Brandon - thanks, i've posted the question - http://craftcms.stackexchange.com/questions/11812/how-to-display-the-title-of-the-category-currently-being-shown
Martin
CC BY-SA 3.0
2015-10-07T14:11:00.963Z
2015-10-07T17:03:14.253Z
2015-10-07T17:03:14.253Z
Brandon Kelly
<p>Like you mention there are really two ways of going about it.</p>

<p>For both ways, you'll want to populate a select dropdown with the value of an individual option being the category name you want to filter by.</p>

<p>The first way you could do it is loading all of the people entries onto the page. Using craft tags spit out all of your people onto the page, and make sure you're giving each "person" an attribute (or class) that lets you show/hide them based on their category</p>

<p>eg:</p>

<pre><code>&lt;div class="person" data-category="{{ entry.categoryName }}"&gt;
&lt;h3&gt;Persons Name&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<p>Within your javascript code, write an event handler that will fire when you change the select dropdown, and then show/hide the people based on the value selected:</p>

<pre><code>$(".people-category-dropdown").change(function(){

  var categoryName = $(this).val();

  $(".person").hide(); 
  $(".person").is("[data-category='"+ categoryName +"']").show();

});
</code></pre>

<p>The second way of doing it is to initially only load one category of people onto the page, and when someone updates the dropdown, fire off an ajax request that fetches all of the people from that category. When that response is sent back, swap out all the old people with the new ones.</p>

<p>Those code examples above are by no means all the code you'll need to get things implemented, but hopefully that at least points you in the right direction!</p>

CC BY-SA 3.0
2015-10-07T14:17:58.720Z
Or by using the option Brandon listed above :)
Bryant
CC BY-SA 3.0
2015-10-07T14:16:46.470Z
2015-10-07T14:16:46.470Z
Bryant
<p>I have a list of people (entries) who are related to Categories.</p>

<p>I would like to create select menu which will change (filter) the people (entries) shown on the page depending on which category (option) is selected from the select menu.  I would like the default option to show everyone.</p>

<p>I don't mind if this is done on page reload or via ajax but I really don't know where to start with this one :/</p>

<p>Thanks again</p>

<p>Martin</p>

CC BY-SA 3.0
2015-10-07T12:55:15.827Z
As far as I understand, this select menu would be on the frontend. You could also do it with a frontend filter plugin like isotope: http://isotope.metafizzy.co/ using the category id's as filter options
KSPR
CC BY-SA 3.0
2015-10-08T08:36:45.933Z
Hi Kaspar, I gave this method a shot and it does work :)  However, I would rather stay with the loaded page actually being a category page, rather than just showing and hiding.  Many thanks!
Martin
<categories><filter><ajax>
Loading related entries by category using a select menu
# Loading related entries by category using a select menu

(Asked by: username_0 on 2015-10-07)

I have a list of people (entries) who are related to Categories.

I would like to create select menu which will change (filter) the people (entries) shown on the page depending on which category (option) is selected from the select menu. I would like the default option to show everyone.

I don't mind if this is done on page reload or via ajax but I really don't know where to start with this one :/

Thanks again

username_0

**Tags:** categories, filter, ajax

> **Comments:**
> **username_1**: As far as I understand, this select menu would be on the frontend. You could also do it with a frontend filter plugin like isotope: http://isotope.metafizzy.co/ using the category id's as filter options  
> **username_0**: Hi Kaspar, I gave this method a shot and it does work :)  However, I would rather stay with the loaded page actually being a category page, rather than just showing and hiding.  Many thanks!  

---

## 2 answers

### Answer by username_2 on 2015-10-07. Score: 3 | Accepted answer

You can do this using the relatedTo param.
{# Get the selected category ID from a 'catId' query string param #}
{% set catId = craft.request.getQuery('catId') %}

{# Define the 'relatedTo' param value, depending on if there is a category #}
{% if catId %}
    {% set relatedToParam = {
        targetElement: catId,
        field: 'categoriesFieldHandle'
    } %}
{% else %}
    {% set relatedToParam = null %}
{% endif %}

{# Define the ElementCriteriaModel for people #}
{% set people = craft.entries({
    section: 'people',
    relatedTo: relatedToParam,
    limit: null,
    order: 'title asc'
}) %}

{# Output the people #}
{% for person in people %}
    {{ person.title }}
{% endfor %}

With this code in place, you just need to update your view so that when a category is selected, this template is re-loaded with a ?catId=X query string, where X is the selected category ID.
The simplest example of that would be with a list of category links:
{% for cat in craft.categories.group('myGroupHandle') %}
    {% set url = url(craft.request.path, { catId: cat.id }) %}
    {{ cat.title }}
{% endfor %}

> **Comments:**
> **username_0**: Hi Brandon, when I add the template code verbatim it gives me the error "Unexpected tag name "catId" (expecting closing tag for the "block" tag defined near line 5)"  - There is a closing block tag.  
> **username_2**: @username_0 Sorry, typo. Forgot the `set` in that `{% set catId = ...` line.  
> **username_0**: Sorry, one last thing... how do I display the title of the category currently being shown?  
> **username_2**: @username_0 Can you post that as a new question please?  
> **username_0**: Hi Brandon - thanks, i've posted the question - http://craftcms.stackexchange.com/questions/11812/how-to-display-the-title-of-the-category-currently-being-shown  

---

### Answer by username_3 on 2015-10-07. Score: 2

Like you mention there are really two ways of going about it.
For both ways, you'll want to populate a select dropdown with the value of an individual option being the category name you want to filter by.
The first way you could do it is loading all of the people entries onto the page. Using craft tags spit out all of your people onto the page, and make sure you're giving each "person" an attribute (or class) that lets you show/hide them based on their category
eg:

Persons Name


Within your javascript code, write an event handler that will fire when you change the select dropdown, and then show/hide the people based on the value selected:
$(".people-category-dropdown").change(function(){

  var categoryName = $(this).val();

  $(".person").hide(); 
  $(".person").is("[data-category='"+ categoryName +"']").show();

});

The second way of doing it is to initially only load one category of people onto the page, and when someone updates the dropdown, fire off an ajax request that fetches all of the people from that category. When that response is sent back, swap out all the old people with the new ones.
Those code examples above are by no means all the code you'll need to get things implemented, but hopefully that at least points you in the right direction!

> **Comments:**
> **username_3**: Or by using the option Brandon listed above :)  

---

