title: jQuery - hide & show li items that have a variable class
body: <p>I have a drop-down menu as an unordered list. When a category is selected, I only want the <code>li</code> with the same class as the value of the selection to remain visible.</p>
  
  <p>I have tried using the <code>not</code> selector but I'm having trouble using it in combination with a variable class - that is also the same as the value of the selection.</p>
  
  <pre><code>$(document).ready(function(){
      var chosenCat = $('select[name="mapCat"]').val();
      var className = $('#mapContent ul li.');
      $("#mapContent ul li").not("'.' +chosenCat").addClass("displayNone");   
  });
  </code></pre>
  
  <p>I've been making edits but this jQuery snippet isn't working. How do I correctly write the variable I want to remain visible? Or is the error in the <code>val()</code> I'm pulling?</p>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;select name="mapCat"&gt;
      &lt;option value="opt0" selected="selected"&gt;SELECT A CATEGORY&lt;/option&gt;
      &lt;option value="opt1"&gt;UNIVERSITIES&lt;/option&gt;
      &lt;option value="opt2"&gt;HOSPITALS&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="mapContent"&gt;
      &lt;ul&gt;
         &lt;li class="opt1"&gt;University X&lt;/li&gt;
         &lt;li class="opt2"&gt;Hospital X&lt;/li&gt;
         &lt;li class="opt2"&gt;Hospital Y&lt;/li&gt;
         &lt;li class="opt1"&gt;University Y&lt;/li&gt;
         &lt;li class="opt1"&gt;University Z&lt;/li&gt;
         &lt;li class="opt2"&gt;Hospital Z&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS snippet:</p>
  
  <pre><code>.displayNone {
     display: none;
   }
  </code></pre>