Afficher masquer avec Jquery

Bonjour,
J'ai un petit soucis avec un petit script que je veux utiliser dans un formulaire.
Le but est le suivant :
Si "nbrcouleurs" != de 0 alors je veux afficher rouge et bleue ma liste déroulante.
Si "nbrcouleurs" = 0 alors je 'affiche que bleue.

Dans mon header j'ai le chargement de jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

et mon script

<script type="text/javascript">
$(document).ready(function(){
    // Rend invisible tous les éléments qui on la classe cacher
        $(".cacher").hide();
    //lors du changement de selection de la liste portant l'id nbrcouleurs
        $("#nbrcouleurs").change(function(){
            // si la liste qui porte l'id nbrcouleurs a une option choisie donc différente de zéro alors
            if($("#nbrcouleurs").val != "0"){
                // on affiche les éléments qui on la classe cacher
                $(".cacher").show();
            }
            else{
                //sinon on les caches de nouveaux
                $(".cacher").hide();
            }
        })
    });
</script>

puis mon mini formulaire

<form>
<select id="nbrcouleurs">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
  
<select name="couleurdefini" id="couleurdefini">
    <option value="rouge" class="cacher">rouge</option>
    <option value="bleu" selected="selected">bleu</option>
</select>
</form>

Au lancement de la page par défaut on a bien 0 et donc que bleu dans la liste déroulante (c'est bon).
Par contre si je met un chiffre (1 ou 2...) j'ai bien les 2 choix dans ma liste déroulante (toujours bon) mais si je remet 0 alors au lieu de n'avoir que le bleue j'ai toujours les 2 choix.

Auriez vous une idée du pourquoi lorsque je remet sur 0 sa ne masque plus le "rouge" dans ma liste ?

J'ai trouvé la solution il maquait les ()
Merci