I have a drop-down menu as an unordered list. When a category is selected, I only want the li with the same class as the value of the selection to remain visible.

I have tried using the not 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.

$(document).ready(function(){

    var chosenCat = $('select[name=mapCat]').val();

    var className = $('#mapContent ul li.');

    $(#mapContent ul li).not('.' +chosenCat).addClass(displayNone);   

});

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 val() I'm pulling?

the HTML:

<select name=mapCat>

    <option value=opt0 selected=selected>SELECT A CATEGORY</option>

    <option value=opt1>UNIVERSITIES</option>

    <option value=opt2>HOSPITALS</option>

</select>

<div id=mapContent>

    <ul>

       <li class=opt1>University X</li>

       <li class=opt2>Hospital X</li>

       <li class=opt2>Hospital Y</li>

       <li class=opt1>University Y</li>

       <li class=opt1>University Z</li>

       <li class=opt2>Hospital Z</li>

    </ul>

</div>

CSS snippet:

.displayNone {

   display: none;

 }