Body: <p>I am currently working with craft. </p>
  
  <p>I want to create a <code>filter</code> with a dropdown list that will only display the images, that are related to the selected dropdown. </p>
  
  <p>Is that even possible?</p>
  
  <p>What I have:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;select&gt;
          {% for option in entry.selection.options %}
              &lt;option&gt;{{ option.value }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
      {% for image in entry.bild %}
          &lt;div class="col s12 m6 l4"&gt;
              &lt;a data-fancybox="gallery-{{entry.slug}}" href="{{ image.url }}"&gt;&lt;img width="100%" src="{{ image.url }}"&gt;&lt;/a&gt;
          &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-12T13:07:33.103Z
Comments.Text: We need more information how they are related? What values does the dropdown contain? Is is a size range? A related category? a date range picker? Does it has to do with the filename? (eg beginning character A, B, C)
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-12T13:24:36.237Z
Comments.Text: The image will have a value which was added to the image by field. See Screenshot [My Screenshot](https://imgur.com/KKpq93t).
  The dropdown will have values like years and months (my intention was to create 2 dropdown menus and sort the images like that)
  
  At the end it should only loop the images with like the same year: For example i will select "2017", and all images that have the selection "2017" will display
Comments.UserDisplayName: Zoruak
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-12T14:40:01.367Z
Comments.Text: Do you want to load them dynamically via ajax or during the page reload?
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-12T15:20:27.343Z
Comments.Text: Best would be via Ajax, but if its simplier to use page reload than I would choose this.
Comments.UserDisplayName: Zoruak
Tags: <assets><drop-down>
Title: Show Images via Dropdown dynamically
ThreadText: # Show Images via Dropdown dynamically
  
  (Asked by: username_0 on 2018-02-12)
  
  I am currently working with craft.
  
  I want to create a `filter` with a dropdown list that will only display the images, that are related to the selected dropdown.
  
  Is that even possible?
  
  What I have:
  
  ```
  <div class="row">
      <select>
          {% for option in entry.selection.options %}
              <option>{{ option.value }}</option>
          {% endfor %}
      </select>
      {% for image in entry.bild %}
          <div class="col s12 m6 l4">
              <a data-fancybox="gallery-{{entry.slug}}" href="{{ image.url }}"><img width="100%" src="{{ image.url }}"></a>
          </div>
      {% endfor %}
  </div>
  
  ```
  
  **Tags:** assets, drop-down
  
  > **Comments:**
  > **username_1**: We need more information how they are related? What values does the dropdown contain? Is is a size range? A related category? a date range picker? Does it has to do with the filename? (eg beginning character A, B, C)  
  > **username_0**: The image will have a value which was added to the image by field. See Screenshot [My Screenshot](https://imgur.com/KKpq93t). The dropdown will have values like years and months (my intention was to create 2 dropdown menus and sort the images like that)  At the end it should only loop the images with like the same year: For example i will select "2017", and all images that have the selection "2017" will display  
  > **username_1**: Do you want to load them dynamically via ajax or during the page reload?  
  > **username_0**: Best would be via Ajax, but if its simplier to use page reload than I would choose this.  
  
  ---
  
  ## 0 answers
  
  