Html 将MSIE下的“选择”选项显示样式更改为“无”

Html 将MSIE下的“选择”选项显示样式更改为“无”,html,css,Html,Css,有人能给我一个线索,为什么下面的代码不能在MSIE下工作 <html> <body> <select id="si"> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> <script type="text/javascript"&g

有人能给我一个线索,为什么下面的代码不能在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>

IE不允许您直接操作选项元素。根据我的经验,您需要从select中删除所有选项元素,并使用您想要进行的任何更改重新填充它们。在本例中,已删除一个元素。

这似乎在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>

对于那些需要在受影响的版本中隐藏选项元素的人,我在这里发布了一个解决方案,它不克隆或删除选项,而是围绕选项进行包装,可以说这更容易处理:


跟进:IE11和Safari 8仍然需要这种方法。也可能是歌剧,但我没有测试。