title: jQuery filter with drop down box using data-type
body: <p>I need to filter through rows of a table using a drop-down box with jQuery. What I can't figure out how to do is how to relate the value of the options to the data-type of the table rows. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label for="filter"&gt;Type:&lt;/label&gt;
  &lt;select id="filter&gt;
      &lt;option value="all"&gt;All Steps&lt;/option&gt;
      &lt;option value="standard"&gt;Standards&lt;/option&gt;
      &lt;option value="review"&gt;Reviews&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table id="table&gt;
      &lt;tr id="one" class="row" data-type="standard"&gt;
          &lt;td&gt;Standard&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="one" class="row" data-type="review"&gt;
          &lt;td&gt;Reviews&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$("#filter").change(function () {
  $("#table").find(data-type).each(function () {
      if ($(this).text() != $("#filter").val()) 
          $(this).hide();
      else 
          $(this).parent().show();
      if ($("#filter").val() == "all") 
          $(this).show();
      });
  });
  </code></pre>
  
  <p>The jQuery here is just pieced together based off of what I've found so far by researching around. It's important that I leave the data-type attribute in the table rows. </p>
  
  <p>I'm pretty new to jQuery, so anything helps!</p>
  
  <p>Here's the Code Pen: <a href="http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111" rel="noreferrer">http://codepen.io/aburnsworth/pen/XKzgqa?editors=1111</a></p>