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

针对 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>
    <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>

你可能感兴趣的:(iframe,ie6,select,隐藏,DorpDownList)