Question

我知道可能有更好的方法，我尝试了很多方法。我通常会执行.hide()或.show()，但css显示切换在FF上工作得更好，而不是在IE上。这是我的代码

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

我已经尝试过案例切换，如果其他但没有任何作用

<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

点击IE中的“选项”时是否调用了click函数？我的猜测是IE中的选项元素没有触发点击事件。在select上添加更改（..）并测试值。

以下是代码：

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

Answer 2

首先，我不建议使用以数字开头的ID和类。

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

希望这有帮助！

如果选项值选择了交换机css，则不工作IE8

2 个答案: