隐藏选择元素中的选项，而不是在IE中工作？ [英] Hide options in select element, not working in IE?

问题描述

可能重复：

使用jQuery在IE中隐藏选择选项

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

So as you can see below, i have two select elements. The first one has two values, 1.4 and 1.7. Depending on which option is selected i want to disable certain options in the second select element. It works perfectly fine in chrome, but IE is being a bitch (as usual!).

任何想法有什么问题？

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

推荐答案

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

The notion of hidden options in a select doesn't exist in IE. You would have to manually remove and re-add the entries, which may be somewhat of an inconvenience.

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

Another solution would be to also disable the elements:

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

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

This will hide the option in all browsers that support it, but disable it in IE, which means it'll still be visible, but visually distinguished from the other options, and un-selectable.

然而：如果您的问题与您完全一致已经描述过，你的脚本只有两种选择，最简单的解决方案可能是隐藏和 show 两个不同的下拉菜单，具体取决于选择的选项。

However: if your problem is exactly as you have described, and there are only two options that your script will vary on, the simplest solution might be to hide and show two different dropdowns entirely, depending on which option is selected.

这篇关于隐藏选择元素中的选项，而不是在IE中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！