title: Hide content not containing select box value
body: <p>I have a page where I would like to filter the shown content by country, using a select box. The page initially shows all content, but when a country is selected, everything that <em>doesn't</em> match that value is hidden by adding a CSS class.</p>
  
  <p>This is my relevant code so far:</p>
  
  <h2><a href="http://jsfiddle.net/NYCy9/" rel="nofollow">jsFiddle</a></h2>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;select name="filter" id="filter"&gt;
      &lt;option value="" disabled selected&gt;&lt;/option&gt;
      &lt;option value="France"&gt;France&lt;/option&gt;
      &lt;option value="Germany"&gt;Germany&lt;/option&gt;
      &lt;option value="UK"&gt;UK&lt;/option&gt;
  &lt;/select&gt;
  &lt;div class="media"&gt;
      &lt;p&gt;blah blah blah France blah blah&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="media"&gt;
      &lt;p&gt;blah blah blah Germany blah blah&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="media"&gt;
      &lt;p&gt;blah blah blah Germany blah blah&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="media"&gt;
      &lt;p&gt;blah blah blah UK blah blah&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.hidden {
      display: none;
      visibility: hidden;
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$('#filter').change(function () {
      var country = $('#filter').val();
      $('.media').each(function () {
          if ($('.media').find(country)) {
  
          } else {
              $('.media').addClass('hidden');
          }
      })
  });
  </code></pre>
  
  <p>I have little experience with jQuery/JavaScript, but I've investigated and think I need to loop through all the matching content "blocks" with <code>each()</code>, each time looking for the relevant content with <code>find()</code>, but I don't know enough to get this working. My code currently does nothing whatsoever.</p>
  
  <p>Any help would be much appreciated.</p>