隐藏select元素中的选项，不在IE中工作？

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

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

有什么想法有什么不对吗？

 Height  1.4 1.7  
 
 Amount  2 3 4  
  $(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(); } } });  

Answer 1

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

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

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

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

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

Answer 2

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

您可以使用此代码：

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

Answer 3

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

所以你会有类似的东西

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