Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-07T14:55:37.143Z
Answers.Text: 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.
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-07T17:03:41.050Z
Answers.Text: @Martin Sorry, typo. Forgot the `set` in that `{% set catId = ...` line.
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-08T08:32:05.377Z
Answers.Text: Sorry, one last thing... how do I display the title of the category currently being shown?
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-08T13:17:36.663Z
Answers.Text: @Martin Can you post that as a new question please?
Answers.UserDisplayName: Brandon Kelly
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-08T13:47:10.753Z
Answers.Text: 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
Answers.UserDisplayName: Martin
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-07T14:11:00.963Z
Answers.LastActivityDate: 2015-10-07T17:03:14.253Z
Answers.LastEditDate: 2015-10-07T17:03:14.253Z
Answers.UserDisplayName: Brandon Kelly
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-07T14:17:58.720Z
Answers.Text: Or by using the option Brandon listed above :)
Answers.UserDisplayName: Bryant
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-10-07T14:16:46.470Z
Answers.LastActivityDate: 2015-10-07T14:16:46.470Z
Answers.UserDisplayName: Bryant
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-10-07T12:55:15.827Z
Comments.Text: 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
Comments.UserDisplayName: KSPR
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-10-08T08:36:45.933Z
Comments.Text: 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!
Comments.UserDisplayName: Martin
Tags: <categories><filter><ajax>
Title: Loading related entries by category using a select menu
ThreadText: # 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](http://buildwithcraft.com/docs/templating/craft.entries#relatedTo).
  
  ```html
  {# 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 %}
      <li>{{ person.title }}</li>
  {% 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:
  
  ```html
  {% for cat in craft.categories.group('myGroupHandle') %}
      {% set url = url(craft.request.path, { catId: cat.id }) %}
      <li><a href="{{ url }}">{{ cat.title }}</a></li>
  {% endfor %}
  
  ```
  
  > **Comments:**
  > **username_0**: Hi username_2, 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 username_2 - 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:
  
  ```
  <div class="person" data-category="{{ entry.categoryName }}">
  <h3>Persons Name</h3>
  </div>
  
  ```
  
  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 username_2 listed above :)  
  
  ---
  
  