title: filting elements with 2 select list
body: <p>i have li list each one has data-name and data-body
  i want to show the only li's which match the selected value
  first select is to select the car name 
  second select is to select the car body </p>
  
  <pre><code>&lt;ul id="shop"&gt;
      &lt;li&gt;&lt;a href="#" data-name="audi" data-body="cedan"&gt;&lt;img src="images/1.jpg"&gt;audi-cedan&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-name="bmw" data-body="cedan"&gt;&lt;img src="images/1.jpg"&gt;bmw-cedan&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-name="audi" data-body="suv"&gt;&lt;img src="images/1.jpg"&gt;audi-suv&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" data-name="bmw" data-body="suv"&gt;&lt;img src="images/1.jpg"&gt;bmw-suv&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;select id="select-name"&gt;
      &lt;option value=""&gt;select&lt;/option&gt;
      &lt;option value="audi"&gt;audi&lt;/option&gt;
      &lt;option value="bmw"&gt;bmw&lt;/option&gt;
  &lt;/select&gt;
  &lt;select id="select-body"&gt;
      &lt;option value=""&gt;select&lt;/option&gt;
      &lt;option value="cedan"&gt;cedan&lt;/option&gt;
      &lt;option value="suv"&gt;suv&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>here is what i tried , when i select first one its working but when i select the second one with it it not working fine </p>
  
  <pre><code>$('#select-name').change(function() {
      $("li a").hide();
      var selected = $('#select-name option:selected').attr("value");
      $("li a").each(function() {
          if ( $(this).attr("data-name") === selected ){
              $(this).show()
          }
      }); 
  });
  
  $('#select-body').change(function() {
      $("li a").hide();
      var selected = $('#select-body option:selected').attr("value");
      $("li a").each(function() {
          if ( $(this).attr("data-body") === selected ){
              $(this).show()
          }
      }); 
  });
  </code></pre>