Question

可能重复：
Hide select option in IE using jQuery

因此，您可以在下面看到，我有两个选择元素。第一个有两个值，1.4和1.7。根据选择的选项，我想禁用第二个选择元素中的某些选项。它在chrome中运行得非常好，但IE是一个婊子（像往常一样！）。

任何想法有什么不对？

<p>
    <label style="width: 155px; display: inline-block;">Height</label>
    <select name="height">
        <option value="1.4">1.4</option>
        <option value="1.7">1.7</option>
    </select>
</p>
<p>
    <label style="width: 155px; display: inline-block;">Amount</label>
    <select name="slanor">
        <option class="four" value="2">2</option>
        <option class="four seven" value="3">3</option>
        <option class="seven" value="4">4</option>
    </select>
</p>


<script>
$(document).ready(function() {
    check();

    $('select[name=height]').change(function() {
        check();
    });

    function check() {
        var slanor = $('select[name=slanor]');
        var currHeight = $('select[name=height]').val();

        if(currHeight == '1.4') {
            slanor.find('option').hide();
            slanor.find('.four').show();
        } else {
            slanor.find('option').hide();
            slanor.find('.seven').show();
        }
    }
});
</script>

Answer 1

IE中不存在options中隐藏select的概念。您必须手动删除并重新添加条目，这可能会带来一些不便。

另一种解决方案是禁用元素：

slanor.find(option).hide().prop('disabled', true);

这将隐藏所有支持它的浏览器中的选项，但在IE中禁用它，这意味着它仍然可见，但在视觉上与其他选项区别开来，并且无法选择。

然而：如果您的问题与您所描述的完全一致，并且您的脚本只有两个选项可供选择，最简单的解决方案可能是hide和{{1两个完全不同的下拉菜单，具体取决于选择的选项。

Answer 2

在jQuery中调用.hide（）会在元素中添加display：none。我怀疑这是标准HTML，你可以用这种方式隐藏选项。

您可以改用此代码：

slanor.empty();
if (currHeight == '1.4') {
    slanor.append($('<option'>).val('2').text('2'));
    slanor.append($('<option'>).val('3').text('3'));
}
else {
    slanor.append($('<option'>).val('3').text('3'));
    slanor.append($('<option'>).val('4').text('4'));
}

Answer 3

选项标记不支持css display属性。这是show（）/ hide（）的作用。您最好的选择是删除并重新创建需要的选项。或者我猜你可以将它们附加到另一个隐藏的物体上，当你需要它们完全形成时将它们拉回来。

所以你会有像

这样的东西

$("option").appendTo($("#myhiddenselect"));
$(".four").appendTo($("#myvisibleselect"));

隐藏选择元素中的选项，而不是在IE中工作？

3 个答案: