ne fonctionne pas IE8 si option valeur sélectionnée switch css

Question

Je sais qu'il y a probablement une meilleure façon de faire cela, j'ai essayé de nombreuses façons. Je ferais normalement le .hide() ou .show() mais le commutateur d'affichage de css a fonctionné mieux sur FF, pas sur IE. Voici mon code

$(".VariationSelect option[value='21']").click(function() { 
    $("#21").css("display", "block"); 
}); 
$(".VariationSelect option[value!='21']").click(function() { 
    $("#21").css("display", "none"); 
}); 

J'ai essayé interrupteur de cas et si et d'autre, mais rien ne fonctionne

<div class="Value"> 
    <select name="variation[1]" class="VariationSelect" style="width: 180px;"> 
     <option value="">Choose a Ring Size</option> 
     <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="21">Custom</option> 
    </select> 
</div> 
<div id="21" style="margin-left:20px; float:left; display:none"> 
    <div class="Label" style="margin-top:5px; "> 
     Custom Size:&nbsp;&nbsp; 
    </div> 
</div> 

Answer 1

est la fonction de clic appelée lorsque vous cliquez sur le « option » dans IE? Ma conjecture est les événements de clic ne sont pas déclenchés sur les éléments d'option dans IE. Mettez une modification (..) sur le select à la place et testez la valeur.

Voici le code:

$(".VariationSelect").change(function() { 
    if ($(this).val() == "21") { 
     $("#21").css("display", "block"); 
    } else { 
     $("#21").css("display", "none"); 
    } 
}); 

Answer 2

Tout d'abord, je vous recommande de ne pas utiliser les ID et les classes qui commencent par un numéro.

jQuery

$(".VariationSelect").change(function() { 
    if ($(this).val() == '21') { 
     $("#cont_21").show(); 
    } else { 
     $("#cont_21").hide(); 
    } 
}); 

HTML

<div id="cont_21" style="margin-left:20px; float:left; display:none"> 
    <div class="Label" style="margin-top:5px; "> 
     Custom Size:&nbsp;&nbsp; 
    </div> 
</div> 

JSFiddle Demo here.

Espérons que cela aide!