隐藏选择元素中的选项,而不是在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

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

另一个解决方案是禁用元素:

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

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

但是:如果你的问题是完全按照你的描述,也有只有两个选择,你的脚本将改变时,最简单的解决办法可能是hide和show两个不同的下拉列表完全取决于哪个选项被选中.