title: Show hide multiple divs based on select value
body: <p>Looking for some jQuery to help hide and reveal content in a simple form I'm creating.</p>
  
  <p>Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).</p>
  
  <p>I think data attributes would be a good route to go down but a little unsure of where to start.</p>
  
  <pre><code>&lt;form&gt;
    &lt;div data-form-order="1"&gt;
  
      &lt;div id="opening-question"&gt;
        &lt;select id="select-box"&gt;
        &lt;option value="0"&gt;- please select -&lt;/option&gt;
        &lt;option value="1"&gt;Option 1&lt;/option&gt;
        &lt;option value="2"&gt;Option 2&lt;/option&gt;
        &lt;option value="3"&gt;Option 3&lt;/option&gt;
      &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div data-response="op1"&gt;
        This is content for option 1.
      &lt;/div&gt;
      &lt;div data-response="op2"&gt;
        This is content for option 2.
      &lt;/div&gt;
      &lt;div data-response="op3"&gt;
        This is content for option 3.
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div data-form-order="2" id="other-questions"&gt;
      Rest of form content. This area should show when option values 1-3 are selected in the select field.
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>