<p>Two options:</p>

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

CC BY-SA 3.0
2017-03-03T16:24:49.760Z
Can you mark this as solved if it answers the question @mention79?
darylknight
CC BY-SA 3.0
2017-02-07T00:46:32.900Z
You should mention that you are talking about a JavaScript powered toggle implementation. Which is also the reason why it's not really a Craft specific problem to solve.
carlcs
CC BY-SA 3.0
2017-02-06T09:52:59.490Z
2017-02-07T15:37:27.280Z
2017-02-07T15:37:27.280Z
darylknight
<p>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. </p>

<p>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.</p>

<p>Here's the current markup:</p>

<p>Hopefully someone can help to get it working?</p>

<pre><code>&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 #}
......
</code></pre>

<p><a href="https://i.sstatic.net/S5QJ7.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/S5QJ7.png" alt="enter image description here"></a></p>

CC BY-SA 3.0
2017-02-06T09:49:44.353Z
I'm voting to close this question as off-topic because it's not related to Craft CMS specifically.
darylknight
CC BY-SA 3.0
2017-02-06T09:52:29.340Z
I disagree. The question is how can I link these matrix blocks to the drop down select. An answer would be appreciated
mention79
CC BY-SA 3.0
2017-02-06T17:40:38.967Z
I disagree as well, the OP clearly mentions how Matrix plays into it. Voting to keep open.
Lindsey D
CC BY-SA 3.0
2017-02-07T00:56:10.393Z
It looks like you got a perfectly fine answer from @darylknight already in the comments to your related question http://craftcms.stackexchange.com/questions/18565/how-to-approach-a-multi-level-floorplan/18566#18566, did you miss that?
carlcs
CC BY-SA 3.0
2017-02-07T01:00:05.137Z
It doesn't answer how to target the different floors created from the same matrix blocks which is the question
mention79
<templating><matrix>
Select dropdown linking to Matrix blocks
# Select dropdown linking to Matrix blocks

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

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?

  
    
      
        Select Floor
        {% for block in entry.floorplans %}
        {{ block.floorplanlevel.label }}
        {% endfor %}
      
    
  



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

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

**Tags:** templating, matrix
> **Comments:**
> **username_1**: I'm voting to close this question as off-topic because it's not related to Craft CMS specifically.  
> **username_0**: I disagree. The question is how can I link these matrix blocks to the drop down select. An answer would be appreciated  
> **username_2**: I disagree as well, the OP clearly mentions how Matrix plays into it. Voting to keep open.  
> **username_3**: It looks like you got a perfectly fine answer from @darylknight already in the comments to your related question http://craftcms.stackexchange.com/questions/18565/how-to-approach-a-multi-level-floorplan/18566#18566, did you miss that?  
> **username_0**: It doesn't answer how to target the different floors created from the same matrix blocks which is the question  

---

## 1 answers

### Answer by username_1 on 2017-02-06. Score: 4

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 }}`.

> **Comments:**
> **username_3**: You should mention that you are talking about a JavaScript powered toggle implementation. Which is also the reason why it's not really a Craft specific problem to solve.  
> **username_1**: Can you mark this as solved if it answers the question @mention79?  

---

