title: Hide divs containing text equal to the selected text?
body: <p>end goal is to only show the divs, containing the text equal to that of the select menu/dropdown. But I think I can make my way there if I could just figure out how to hide them. So I have a piece of HTML:</p>
  
  <pre><code>&lt;select id="select"&gt;
  &lt;option selected&gt;Show All&lt;/option&gt;
  &lt;option&gt;Red&lt;/option&gt;
  &lt;option&gt;Blue&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="option"&gt;red&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="option"&gt;blue&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="option"&gt;red&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="option"&gt;blue&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and some jQuery:</p>
  
  <pre><code>$("#select").change(function () {
  var text = $(".text").text();
  var option = $("#select  option:selected").text();
  if(text === option)
  $( ".option:contains(" + text + ")" ).parent('div').hide();
  });
  </code></pre>
  
  <p>I feel like I tried various stuff, with no luck. If I set the value of the text to begin with, then it's easy, the trick here is to have the text to look for depend on the <code>&lt;select&gt;</code> so that in theory you would just have to add options to that. Any suggestions on this?</p>