jQuery - hide & show li éléments qui ont une variable de classe

J'ai un menu déroulant comme une liste non-ordonnée. Quand une catégorie est sélectionnée, je veux seulement le li avec la même classe que la valeur de la sélection de rester visible.

J'ai essayé d'utiliser le not sélecteur, mais je vais avoir du mal à l'utiliser en combinaison avec une variable de classe - qui est également la même que la valeur de la sélection.

$(document).ready(function(){
    var chosenCat = $('select[name="mapCat"]').val();
    var className = $('#mapContent ul li.');
    $("#mapContent ul li").not("'.' +chosenCat").addClass("displayNone");   
});

J'ai été faire des modifications mais ce jQuery extrait de code ne fonctionne pas. Comment puis-je écrire correctement la variable que je veux rester visible? Ou est l'erreur dans le val() je suis en tirant?

le code 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>

Bout de code CSS:

.displayNone {
   display: none;
 }

OriginalL'auteur colleen | 2014-02-25

  1. 3

    essayez le code suivant 

    $( document ).ready(function() {        
         $('select[name="mapCat"]').change(function(){
            var chosenCat =$(this).val();       
            $('#mapContent ul li').hide();
            $('#mapContent ul li.'+chosenCat).show();
         });
        });
    parfait, fonctionne comme un charme.

    OriginalL'auteur Sarath

  2. 2

    Vous n'avez pas besoin de double quotes dans not() sélecteur parce qu'ils peuvent causer la variable à être traités comme des string.

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

    Le code que vous aurez passer '.' +chosenCat dans le pas de sélecteur au lieu de passer .opt0 ou .opt1 etc en fonction de la sélection.

    Aussi vous avez probablement besoin de le faire sur changer le cas de la sélection, aussi si vous voulez juste pour montrer et cacher les vous pouvez utiliser les afficher et de masquer la fonction.

    Démonstration En Direct

    $('select[name="mapCat"]').change(function(){
     var chosenCat = $(this).val();  
     $("#mapContent ul li").show()
     $("#mapContent ul li").not('.' + chosenCat).hide();   
});
    de très bons conseils. merci pour la démo. évidemment, je suis nouveau sur requête - j'ai besoin de me familiariser avec plus d'options de fonction.

    OriginalL'auteur Adil