Select dropdown linking to Matrix blocks I need a little bit of assitance. I have a matrix block that outputs floorplans diagrams and it's specification per floor in a property (see screenshot attached below. 

I've got the matrix fields outputting correctly on the page, but I need to get it to only output a single floor at a time, and not all floors, and then let the user click on a select dropdown to change to the floor level that they want to view.

Here's the current markup:

Hopefully someone can help to get it working?

&lt;form class="form" action="{{ entry.url }}" method="get"&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="selectwrap"&gt;
      &lt;select id="development1" class="form-control" name="floor" onchange="this.form.submit()"&gt;
        &lt;option value=""&gt;Select Floor&lt;/option&gt;
        {% for block in entry.floorplans %}
        &lt;option value="{{ block.floorplanlevel }}"&gt;{{ block.floorplanlevel.label }}&lt;/option&gt;
        {% endfor %}
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;


{# Start Matrix Block #}
{% for block in entry.floorplans %} {# Main Field Handle #}
{% switch block.type %}

{% case "floorplan" %} {# Matrix Block Type Handle #}
......
Two options:


Physically output all the floorplans in the markup {% for block in entry.matrixHandle%} then hide them using CSS, and only display the one from the dropdown using JavaScript. Something like $('#dropdown-id).on('change', function(){});
Change the field from a Matrix so that each floorplan is a separate Entry and you visit each one with an href="{{ entry.url }}.