您的位置：首页 > 其它

IE6 下 select 元素 和 DorpDownList 无法用 display:none 进行隐藏的Bug 解决

2010-03-17 01:00 483 查看
针对 IE6 下，select 元素属于 window.object ,无法用 display:none 进行隐藏的Bug。 使用 iFrame，隐藏（覆盖/掩盖）含有 select 元素（或 DropDownList 控件）的 Div 。 在网上看了下，都没有完整的示例，试了半天都不成功。 只好自己从头研究一遍～～ 哦，使用了简单的JQuery。

附件是在 VS2008＋IE６.0 下创建的 ASP.NET WebSite 。 另，完整的代码如下（*.aspx 文件中 Html 部分,JQuery 请自行下载）： <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DropDownList控件的隐藏</title>
<script src="JS/jquery-1.3.1-vsdoc.js" type="text/javascript"></script> <script src="JS/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> function bt01_ {
//隐藏DropDownList，显示第二部分
$("#div01").attr("style", "; height:100px; z-index:300; display:block;"); // 一定要是 block ，不能是 none 否则出问题。
$("#if01").attr("style", "z-index:99;display:block;position:absolute; left:5px; top:120px; height:500px; ;");
$("#div02").attr("style", "position:absolute; left: 5px;top: 120px; z-index:500; background-color:#eeeeee;display:block;");
//$("#div02").attr("style", "z-index:9999;"); }
function bt02_ {
//隐藏第二部分，显示DropDownList
$("#div01").attr("style", "left:5px;top:120px; ; height:100px; z-index:300; display:block;"); //一定要有 width 和 height
$("#if01").attr("style", "z-index:99;display:none;position:absolute; left:5px; top:120px; height:500px; ;");
$("#div02").attr("style", "display:none");
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
针对 IE6 下，select 元素属于 window.object ,无法用 display:none 进行隐藏的Bug。<br/>
使用 iFrame，隐藏（覆盖/掩盖）含有 select 元素（或 DropDownList 控件）的 Div 。<br/><br/>
<input id="bt01" type="button" value="隐藏DropDownList，显示第二部分" />
<input id="bt02" type="button" value="隐藏第二部分，显示DropDownList" />
<br /><br /><br />
<div id="div01" style="left: 5px;top: 120px; ; height:100px; z-index:300; display:block;">
<iframe id="if01" frameborder="0" style="z-index:9;display:none; position:absolute; left:5px; top:120px; height:500px; ;"></iframe>
<asp:DropDownList ID="ddl01" runat="server" ;200px">
<asp:ListItem Text="001" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="002" Value="2"></asp:ListItem>
</asp:DropDownList>
第一部分：带有 DropDownList 控件的 Div01。
</div>
<br /><br /><br />
<div id="div02" style="position:absolute; left: 5px;top: 120px; z-index:500; display:none; background-color:#eeeeee">
第二部分：没有DripDownList 控件的 Div02。
</div>
</div>
</form>
</body>
</html>本文出自 “跟着兴趣走” 博客，请务必保留此出处http://liweibird.blog.51cto.com/631764/284462
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航