title: Show/ Hide table rows based on dropdown selection
body: <p>I have a date selector for years 2012 &amp; 2013. Based on the selection I want to display only rows with certain classes. Can someone please show me where I am going wrong? </p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
  $(".yr12 td").hide();
  
  $('#selectYr').change(function () {
      var val = $(this).val();
      if (val == yr12) {
           $('.yr12 td').show();
           $('.yr13 td').hide();
      } else {
          $('.yr12 td').hide();
           $('.yr13 td').show();
      }
      });
  });
  </code></pre>
  
  <p>
  <strong>html</strong></p>
  
  <pre><code>&lt;select id="selectYr"&gt;
      &lt;option value="yr13"&gt;2013&lt;/option&gt;
       &lt;option value="yr12"&gt;2012&lt;/option&gt;
     &lt;/select&gt;
  &lt;br&gt;&lt;br&gt;
  
  &lt;table&gt;
  &lt;tr&gt;
  &lt;th&gt;Date&lt;/th&gt;
  &lt;th&gt;Description&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr class="yr13"&gt;
  &lt;td&gt;February 2013 &lt;/td&gt;
  &lt;td&gt;Description 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td class="yr13"&gt;January 2013&lt;/td&gt;
  &lt;td&gt;Description 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="yr12"&gt;
  &lt;td&gt;November 2012&lt;/td&gt;
  &lt;td&gt;Description 3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="yr12"&gt;
  &lt;td&gt;December 2012&lt;/td&gt;
  &lt;td&gt;Description 4&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>