title: hidden rows change to show on javascript on dropdown selection
body: <p>I want to make all the results hidden all the time and to only show the one that corresponds to the option selected on the dropdown list. 
  The code that i have is working perfectly but as you can see this code shows all the results at first and i cant seem to get it to hide all the results first and then show only one.</p>
  
  <pre><code>    &lt;script type="text/javascript" src="/js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      (function($) {
          $("doucment").ready(function() {
  
              $("#choice").change(function() {
                  $("td").hide();
                  $("td." + $(this).val()).show();
              });
          });
  
      })(jQuery);
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;select id="choice"&gt;
          &lt;option value="d1"&gt;A&lt;/option&gt;
          &lt;option value="d2"&gt;B&lt;/option&gt;
          &lt;option value="d3"&gt;C&lt;/option&gt;
          &lt;option value="d4"&gt;D&lt;/option&gt;
      &lt;/select&gt;
      &lt;table id="result" border="1"&gt;
          &lt;tr&gt;
              &lt;td class="d1"&gt;Column A&lt;/td&gt;
              &lt;td class="d2"&gt;Column B&lt;/td&gt;
              &lt;td class="d3"&gt;Column C&lt;/td&gt;
              &lt;td class="d4"&gt;Column D&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>