title: Show/Hide multiple DIVs with Select using jQuery
body: <p>I essentially have the same situation as the person in the following question:</p>
  
  <p>Link: <a href="https://stackoverflow.com/questions/1043267/how-to-show-hide-divs-by-select-jquery">how to show/hide divs by select.(jquery)</a></p>
  
  <p>Through extensive searching within Google I was able to come up with several different methods in which people claim their method works. I have yet to get any to work correctly yet. I don't yet know enough about jQuery to fully understand how to write this from scratch, thus I rely on really good examples for now.</p>
  
  <p>What I've been trying to work with (based on examples I've found and tried) is this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      (document).ready(function() {
          ('.box').hide();&lt;br/&gt;
          ('#dropdown').change(function() {
          ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
          ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
          ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
          });
      });
  &lt;/script&gt;
  &lt;form&gt;
      &lt;select id="dropdown" name="dropdown"&gt;
          &lt;option value="0"&gt;Choose&lt;/option&gt;
          &lt;option value="area1"&gt;DIV Area 1&lt;/option&gt;
          &lt;option value="area2"&gt;DIV Area 2&lt;/option&gt;
          &lt;option value="area3"&gt;DIV Area 3&lt;/option&gt;
      &lt;/select&gt;
  &lt;/form&gt;
  &lt;div id="divarea1" class="box"&gt;DIV Area 1&lt;/div&gt;
  &lt;div id="divarea2" class="box"&gt;DIV Area 2&lt;/div&gt;
  &lt;div id="divarea3" class="box"&gt;DIV Area 3&lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>Note: I am using brackets rather than the less-than and greater-than signs around html to display correctly in this message.</li>
  </ul>
  
  <p>What I get when I test this:</p>
  
  <ul>
  <li>On first load with nothing selected => No DIV is display.</li>
  <li>When I select DIV Area 1 => DIV Area 2 and 3 are displayed.</li>
  <li>When I select DIV Area 2 => DIV Area 1 and 3 are displayed.</li>
  <li>When I select DIV Area 3 => DIV Area 1 and 2 are displayed.</li>
  </ul>
  
  <p>My brain is fried for the day. What can I do to fix this?</p>