title: jQuery show/hide based on select dropdown not working as expected
body: <p>I'm attempting to show/hide <code>&lt;div&gt;</code>'s based on values chosen from a <code>select</code> drop-down menu.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select id="selReport"&gt;
    &lt;option value="Report One"&gt;Report One&lt;/option&gt;
    &lt;option value="Report Two"&gt;Report Two&lt;/option&gt;
    &lt;option value="Report Three"&gt;Report Three&lt;/option&gt;
    &lt;option value="Report Four"&gt;Report Four&lt;/option&gt;
  &lt;/select
  
  &lt;div id="Report One" class="description"&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="Report Two" class="description"&gt;
    &lt;p&gt;...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using the following jQuery snippet to hide the <code>&lt;div&gt;</code>'s and then show them based on what is selected in the drop-down menu: </p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$('.description').hide();
  $('#selReport').change(function () {
    $('description').hide()
    $("[id='" + this.value + "'").show();
  });    
  </code></pre>
  
  <p>When a new option is selected from the drop-down menu the previous <code>&lt;div&gt;</code> that was displayed doesn't hide. It stays displayed and I don't know why. Can someone offer a suggestion?</p>