Changing select's option display style to none under MSIE
Could someone please give me a clue as to why the following code does not work under MSIE?
<html>
<body>
<select id="si">
<option value="">1</o开发者_Python百科ption>
<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 doesn't allow you to manipulate option elements directly. In my experience, you need to remove all of the option elements from the select and repopulate them with whatever changes you want to make already applied (in this case, one element removed).
For anyone having to deal with hiding option elements in those versions affected, I posted a workaround here which doesn't clone or remove the options but wraps spans around them, which is arguably much easier to deal with:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
This seems to work ok under MSIE, with hopefully no "side effects", if you find something wrong please let me know it, thanks.
<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>
加载中,请稍侯......
精彩评论