not working IE8 if option value selected switch css

I know there is probably a better way of doing this, I have tried many ways. I would normally do the .hide() or .show() but the css display switch has been working better on FF, not on IE. Here is my code

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

I've tried case switch and if a开发者_Go百科nd else but nothing works

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

Is the click function called when you click on the "option" in IE? My guess is click events aren't triggered on option elements in IE. Put a change(..) on the select instead and test the value.

Here is the code:

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

First off, I wouldn't recommend using IDs and classes that start with a number.

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.

Hope this helps !