在 MSIE 下将 select 的选项显示样式更改为 none答案

【问题标题】：Changing select's option display style to none under MSIE在 MSIE 下将 select 的选项显示样式更改为 none
【发布时间】：2011-03-24 23:13:28
【问题描述】：

有人可以告诉我为什么下面的代码在 MSIE 下不起作用吗？

<html>
<body>
<select id="si">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>

<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
e[0].style.display="none"; // <-------- no effect
</script>

</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

IE 不允许您直接操作option 元素。根据我的经验，您需要从 select 中删除所有 option 元素，并使用您想要进行的任何更改重新填充它们（在这种情况下，删除一个元素）。

【讨论】：

跟进：IE11 和 Safari 8 仍然需要这种方法。（可能还有 Opera，但我没有测试那个。）

【解决方案2】：

对于必须处理在受影响的版本中隐藏选项元素的任何人，我在这里发布了一个解决方法，它不会克隆或删除选项，而是将它们包裹起来，这可以说更容易处理：

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

【讨论】：

【解决方案3】：

这在 MSIE 下似乎可以正常工作，希望没有“副作用”，如果您发现有问题，请告诉我，谢谢。

<html>
<body>
<select id="si">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<script type="text/javascript">
var e=document.getElementById("si");
e.size=3;
var a = new Array();
var n = new Array();
var x = 2;
if(!a.length)for(var i=0,m=e.length;i<m;i++) {
    a.push(e[i].value);
}
while(e.firstChild)
    e.removeChild(e.firstChild);
for(var i=0,m=a.length;i<m;i++) {
    if(x==a[i]) {
        e.add(new Option(a[i],a[i]));
    }
}
</script>

</body>
</html>

【讨论】：