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

附件是在 VS2008+IE6.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>
<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">
<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;");
//隐藏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");
}
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>
</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>
转载于:https://blog.51cto.com/liweibird/284462