隐藏选择元素中的选项，在 IE 中不起作用？

Question

可能的重复：
使用 jQuery 隐藏 IE 中的选择选项

因此，如下所示，我有两个选择元素。第一个有两个值：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 中不存在 select 中隐藏options 的概念。您必须手动删除并重新添加条目，这可能会带来一些不便。

另一种解决方案是同时禁用这些元素：

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

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

但是：如果您的问题与您所描述的完全一样，并且您的脚本只有两个选项会有所不同，那么最简单的解决方案可能是 hide 和 完全显示两个不同的下拉菜单，具体取决于选择的选项。

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

option标签不支持css显示属性。这就是 show()/hide() 的作用。最好的选择是根据需要删除并重新创建选项。或者我想你可以将它们附加到另一个隐藏的对象上，并在需要它们完全形成时将它们拉回来。

所以你会有类似的东西

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