Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-03T16:24:49.760Z
Answers.Text: Can you mark this as solved if it answers the question @mention79?
Answers.UserDisplayName: darylknight
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-07T00:46:32.900Z
Answers.Text: 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.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-02-06T09:52:59.490Z
Answers.LastActivityDate: 2017-02-07T15:37:27.280Z
Answers.LastEditDate: 2017-02-07T15:37:27.280Z
Answers.UserDisplayName: darylknight
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-06T09:49:44.353Z
Comments.Text: I'm voting to close this question as off-topic because it's not related to Craft CMS specifically.
Comments.UserDisplayName: darylknight
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-06T09:52:29.340Z
Comments.Text: I disagree. The question is how can I link these matrix blocks to the drop down select. An answer would be appreciated
Comments.UserDisplayName: mention79
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-06T17:40:38.967Z
Comments.Text: I disagree as well, the OP clearly mentions how Matrix plays into it. Voting to keep open.
Comments.UserDisplayName: Lindsey D
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-07T00:56:10.393Z
Comments.Text: 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?
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-02-07T01:00:05.137Z
Comments.Text: It doesn't answer how to target the different floors created from the same matrix blocks which is the question
Comments.UserDisplayName: mention79
Tags: <templating><matrix>
Title: Select dropdown linking to Matrix blocks
ThreadText: # 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?
  
  ```
  <form class="form" action="{{ entry.url }}" method="get">
    <div class="form-group">
      <div class="selectwrap">
        <select id="development1" class="form-control" name="floor" onchange="this.form.submit()">
          <option value="">Select Floor</option>
          {% for block in entry.floorplans %}
          <option value="{{ block.floorplanlevel }}">{{ block.floorplanlevel.label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </form>
  
  {# Start Matrix Block #}
  {% for block in entry.floorplans %} {# Main Field Handle #}
  {% switch block.type %}
  
  {% case "floorplan" %} {# Matrix Block Type Handle #}
  ......
  
  ```
  
  [![enter image description here](https://i.sstatic.net/S5QJ7.png)](https://i.sstatic.net/S5QJ7.png)
  
  **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 @username_1 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 @username_0?  
  
  ---
  
  