预先隐藏(display=none)时动态增加的select ，显示（display=block）后无法展开？

Question

应用背景：页面上要在加载时在一些预先隐藏(display:none)的div里动态增加一些下拉列表框(select)和一些选项(option),但是在ＩＥ６下，当页面加载后div被用户进行某些操作改成显示后，我发现select 居然无法展开．虽然无法展开，但是可以获得焦点，并用鼠标滚轮改变选项．我想问一下高手，
１,不能展开的原因，并想知道哪里有关于这个ＢＵＧ的英文官方解释．
２,也欢迎大家给出好的替代解决方案．
（对于此例可能有一个解决方案是，用户操作页面来显示这部分内容时再创建下拉框；但是对于我的实际应用需要创建下拉框后，取得里面的内容并进行更多的操作，所以这个解决方案不可行．）测试用例如下：
<div style="display:none;" id="div1">
<select name="selectyear"><option>请选择年</option><option value="2008">2008年</option><option value="2008">2009年</option><option value="2008">2010年</option></select>
</div>     
        <script type="text/javascript" >            var s = document.createElement("SELECT");
            document.getElementById('div1').appendChild(s);
            var op0 = document.createElement("OPTION");
            s.appendChild(op0);
            op0.value = "";
            op0.text = "请选择月";
            for (var i = 1; i < 13; i++) {
                var op = document.createElement("OPTION");
                s.appendChild(op);
                op.value = i;
                op.text = i + "月";
            }
          //  document.getElementById('div1').style.display = "block";
        </script>
        
        <p><input type="button" onclick="document.getElementById('div1').style.display='block';" value="block" /></p>
        <p><input type="button" onclick="document.getElementById('div1').style.display='none';" value="none" /></p>

Answer 1

首先修改你的代码：见红色部分
方法1：（推荐使用）
<script type="text/javascript" >
            var s = document.createElement("SELECT");
            var op0 = document.createElement("OPTION");
            s.appendChild(op0);
            op0.value = "";
            op0.text = "请选择月";
            for (var i = 1; i < 13; i++) {
                var op = document.createElement("OPTION");
                s.appendChild(op);
                op.value = i;
                op.text = i + "月";
            }
            document.getElementById('div1').appendChild(s);
          //document.getElementById('div1').style.display = "block";
</script> 
说明：只是把红色一行代码移动放到最后面就可以了，你的问题就可以解决了，够简单吧，你是不是在这里头破血流了？嘿嘿...
方法2：
<script type="text/javascript" >
            var s = document.createElement("SELECT");
            document.getElementById('div1').appendChild(s);
            var op0 = document.createElement("OPTION");
            s.appendChild(op0);
            op0.value = "";
            op0.text = "请选择月";
            for (var i = 1; i < 13; i++) {
                var op = document.createElement("OPTION");
                s.appendChild(op);
                op.value = i;
                op.text = i + "月";
            }
          document.getElementById('div1').outerHTML+="";
          //  document.getElementById('div1').style.display = "block";
</script> 
说明：不动原来的代码，只要在后面加上红色部分的代码，你的问题就解决了，也是简单的吧，: )
分析：
跟添加显示的顺序性有关，首先你建立了SELECT对象后马上加到DIV中，相当于向DIV中加了一个没有OPTIOIN的SELECT对象，到后面的程序又加了OPTION对象，这个时候OPTION是加到SELECT对象了，但SELECT对象没有得到“调整”一下，好象穿的衣服太紧了，呵呵，比喻不知恰当否，所以要么把整个SELECT 和 OPTION都建立好了以后，最后才添加到DIV中，要么在最后“调整”一下建立完整后的SELECT也可以，让建立完的SELECT对象松散点；呵呵有分不？

Answer 2

谢谢各位的回复．
shenzhenNBA的回复已经解决问题了，比喻也非常恰当．Ｔo,sundotLei
和添加option的方法无关．option原来已经可以添加．
也和display='' 或者 'block'无关．内容是可以显示的．