title: Show/Hide specific DIV when selecting an option from a dropdown using jQuery
body: <p>I'm trying to setup a select dropdown from which, using jQuery, each option will display a specific DIV. I have most of the functionality working, I just can't get the displayed DIV to hide once another option is selected. This is my code so far:</p>
  
  <pre><code>&lt;select id="contact-location"&gt;
      &lt;option value=""&gt;-- Select Location --&lt;/option&gt;
      &lt;option value="sydneyBranch"&gt;Sydney&lt;/option&gt;
      &lt;option value="melbourneBranch"&gt;Melbourne&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="sydneyBranch" style="display:none"&gt;
      CONTENT
  &lt;/div&gt;
  
  &lt;div id="melbourneBranch" style="display:none"&gt;
      CONTENT
  &lt;/div&gt;
  
  
  $(document).ready(function() {
      $('#contact-location').change(function(){
          var location = $(this).val(),
          div = $('#' + location);
  
          if($(this).val(location)) {
              div.show();
          } else {
              div.hide();
          }
      });
  });
  </code></pre>