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

[wzhiyuan]

应用背景：页面上要在加载时在一些预先隐藏(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>

[sundotLei]

没有ie6，无法测试，也没遇到过lz的问题,
把var op = document.createElement("OPTION")
换成
var op=new Option(i+"月",i);
试试行不?

或者
document.getElementById('div1').style.display='block'
改成
document.getElementById('div1').style.display=''

帮顶!

[wcwtitxu]

上当,测试发现 IE6 下,无问题

[wuwanghui]

5555555555555555555555555555555

[shenzhenNBA]

首先修改你的代码：见红色部分
方法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对象松散点；

呵呵。。。有分不？

[shenzhenNBA]

55...看到时还没有回答，马上写，发帖变成第4楼了

[wzhiyuan]

谢谢各位的回复．
shenzhenNBA的回复已经解决问题了，比喻也非常恰当．

Ｔo,sundotLei
和添加option的方法无关．option原来已经可以添加．
也和display='' 或者 'block'无关．内容是可以显示的．